Question

我有一个棘手的问题，我无法解决这个问题。

场景：我有两个引导顺序列：在大屏幕上，它们彼此相邻，在较小的屏幕上，右边的列在左列上方。

<div class="row">
    <h1>Header section</h1>
</div>
<div class="row">
    <div class="col-md-3 col-md-push-9" id="right">...</div>
    <div class="col-md-9 col-md-pull-3" id="left">...</div>
</div>

这种基本布局和功能完美无缺。

目标： 对于大屏幕，当页面向下滚动时，我希望右列始终保持在页面顶部。对于小屏幕，我希望右列（现在是第一行）保持在顶部，当内容向上滚动时内容在其下滚动。

问题： 我写了一些javascript，似乎只是让正确的列变得越来越低 - 而且它对小屏幕宽度的部分没有影响 - 除了一些神奇的消失。

我玩偏移，重置偏移，我也试过使用一些css定位，但它只是变得更黑，更黑。此外，我尝试使用尽可能多的默认引导样式，并尽可能少地定位黑客。

这甚至可以吗？

Answer 1

目标：

{1} [对于大屏幕，当页面向下滚动时，我希望右列始终保持在页面顶部]。

{2} [对于小屏幕，我希望右侧列（现在是第一行）保持在顶部，当内容向上滚动时内容在其下滚动。]

在bootstrap website本身，他们使用了{1}所需的概念，使用class ='affix'作为右栏，

对于{2}，我有一个想法，在屏幕顶部创建一个导航栏并设置class ='navbar-default navbar-fixed-top visible-xs visible-sm hidden-lg hidden-md '并在该导航栏中给出相同的右列内容，在右栏中使用class ='visible-lg visible-md hidden-sm hidden-xs'。当屏幕尺寸达到小屏幕时，它会隐藏右列的内容，并在顶部显示导航栏内容。

希望这会有用，谢谢。

使有序的bootstrap列浮动在屏幕顶部

1 个答案: