使用引导词缀跳跃的列

Question

我有两个引导列，它们在大屏幕上彼此相邻，在小屏幕上彼此堆叠。这是有意设置的，因此右侧的列在较小的屏幕上堆叠在左侧列的顶部。

问题：在大屏幕上滚动时，纵列在y轴上正确固定，但左右纵列都跳出到两侧并改变宽度。

查看 js fiddle，向下滚动，您会看到问题所在。 http://jsfiddle.net/KKczd/1/

HTML

<div class="col-md-3 col-md-push-9" id="right">
    Right in wide screens, top on small screens
</div>
<div class="col-md-9 col-md-pull-3" id="left">
    Left column with a lot of stuff
</div>

JS

$('#right').affix();

我认为我可以用 css 解决这个问题，但我的努力都没有解决它。感谢任何建议。

Answer 1

这不是一个完整的答案，但如果您进行以下更改，您会发现不同：

<div class="col-md-3 col-md-push-9">
    <div id="right">
        Right in wide screens, top on small screens
    </div>
</div>

词缀仍然改变宽度，因为它有一个固定的位置。有关详细信息，请参阅 here 和 here。

然后还有一些难看的填充差异：在一个狭窄的页面上，块堆叠在一起，顶部的宽度小于底部的宽度。这可能很容易解决。