css - 基金会添加购物车总数

Question

我正在尝试在基础顶部栏中显示购物车总数。目前我有下面的代码。 购物车总数在大屏幕上显示为总数，但在小屏幕上显示为菜单。 有没有办法覆盖顶部部分，以便购物车总计始终显示并且不会成为较小设备上的菜单。 谢谢

<nav class="top-bar" data-topbar>
    <ul class="title-area">

       <li class="name">
          <h1><a href="#">Top Bar Title</a></h1>
       </li>
       <li class="toggle-topbar menu-icon">
          <a href="#"><span>menu</span></a>
       </li>
    </ul>
    <section class="top-bar-section">
        <ul class="left">
           <li>
              <a href="#">Link 1</a>
           </li>
           <li>
              <a href="#">Link 2</a>
           </li>
       </ul>
       <ul class="right">

          <!-- ################## -->
          <li>
             <?php echo $cart; ?>
          </li>

       </ul>
    </section>
</nav> 

Answer 1

我想知道您是否可以将购物车移到 ul.right 和 .top-bar-section 之外？如果是这样，那么很容易为它设置绝对位置并在每个分辨率下都将其固定在右边。

[http://jsfiddle.net/d6g6fbyo/1/][1]

关于是否有可能在每个屏幕上使用当前标记只覆盖某些样式的问题本身，我真的很怀疑。

在小分辨率下，.top-bar-section 换行到下一行，而 .top-bar 失去了它的 overflow:visible，这导致一个人永远不会看到 .top-bar-section 的内容，除非 javascript 会切换回溢出:可见。因此，不可能将购物车定位回那个不愉快的 .top-bar-section 内的可见性。