用bootstrap词缀跳的列

Question

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

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

查看js小提琴，向下滚动，你会看到问题所在。 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。

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