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 docs http://getbootstrap.com/2.3.2/scaffolding.html

修复桌面模式下响应元素的位置

1 个答案: