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丢失溢出：可见，这导致一个人永远不会看到.top-bar-section的内容，除非javascript将切换回溢出：可见。因此，不可能将购物车放回到那个不快乐的.top-bar-section内的能见度。

基础添加购物车总数

1 个答案: