html - 在保持响应式列布局的同时使用 Bootstrap 词缀

Question

Please see this fiddle.我有一个主要内容 div 和一个侧边栏，我想在用户滚动时将其附加到页面顶部。一切正常，除了在移动设备上查看时:

如果没有词缀，这些列的行为与 Bootstrap 列应该一样，侧边栏直接位于主 div 下方。但是有了 affix，div 就消失了。

我已经使用媒体查询解决了这个问题:

//Override affix on small screens:
@media (max-width: 750px) {
    .affix {
        position: static;
    }
}

这会将 div 放在小屏幕上应有的位置，并恢复为桌面上的词缀布局。然而，中间有一个空洞，它就这样消失了。当您将窗口拖入时，它会消失一半左右，然后随着窗口被拖得更小，重新出现在正确的位置。我试过调整 750px 值，但无法得出实际有效的数字。

如何协调网格布局和词缀开关的开/关？我怎么知道断点在哪里 - 我是否应该避免使用特定数量的 PX 并采取另一种方法来解决这个问题？

我当前的 Bootstrap 布局是(我添加了 height:500px 以便您可以在 JS Fiddle 中看到滚动行为 - 它不存在于我的实际代码中):

<div class="container-fluid">
  <div class="row" id="content">

    <div class="col-md-8" style="height:500px">
        Main content
    </div>

    <div class="col-md-4">
      <div class="affix" data-spy="affix" data-offset-top="0">
        Side content
        </div>  
    </div>

  </div>
</div>

非常感谢

Answer 1

我不清楚您希望 Affix 在移动设备上的什么位置，是在内容的右侧还是在其下方，但我会尽力提供帮助:

在您的 Fiddle 中，我没有看到 Affix 暂时消失的点，但我确实看到它对网格系统类做出了预期的 react 。即:col-md-* div 在 992px 处扩展到 100% 宽度。

col-md-* 的媒体查询断点是 992px。 (除非您已在您的 Bootstrap 副本中重置它。)

如果您想保持与桌面设备相同的宽度比，我建议将您的类从 .col-md-* 换成 .col-xs-*所以 .col-md-8 变成了 .col-xs-8 并且 .col-md-4 变成了 .col-xs-4 —— 但是你的主要内容在移动设备上会非常狭窄。

不确定这是否是您想要的？