css - 固定桌面模式下响应元素的位置

Question

我有一个电子商务单页纸，在 Bootstrap 上有大约 12 个元素。在移动模式下，我将结帐附加在列表底部。在桌面模式下，我将其分成一个单独的列，如下所示。问题是，如果我向下滚动，结帐就会消失。我想固定它的位置以随页面滚动。我在看 Bootstraps 词缀属性:

<div data-spy="affix" data-offset-top="200">...</div>

但是好像不行。谁能告诉我可以在下面的代码中添加什么来固定桌面模式的位置？

<div class="row" class="visible-desktop">
  <div class="span7" class="visible-desktop">
    <div class="menu-container">
      Column 1
    </div>
  </div>

  <div class="span5" class="visible-desktop">
    <div class="checkout">
      Checkout that breaks out to second column if desktop
    </div>
  </div>
</div>

Answer 1

我会做这样的事情，为桌面添加一个媒体查询。如果使用bootstrap，桌面模式在979px以上；

@media (min-width:979px) {
  .checkout {
    position:fixed;
    bottom:0; 
    right:0; 
    z-index:100;

  }
}

当然可以根据您的需要更改大小和位置。

这是尺寸的引用页，bootstrap 2.3.2 文档 http://getbootstrap.com/2.3.2/scaffolding.html