twitter-bootstrap - Bootstrap3 中的列排序未按预期工作

Question

我在 Bootstrap 3 中进行列排序实验时遇到了这个问题。

如何实现以下顺序:

• XS:123
• SM:231
• 医学博士:312
• LG:123

这是我的:LG不工作并显示 <blank>13而不是 123

<div class="row">
   <div class="col-xs-4 col-sm-push-8 col-md-push-4 col-lg-pull-0">1</div>
   <div class="col-xs-4 col-sm-pull-4 col-md-push-4 col-lg-pull-0">2</div>
   <div class="col-xs-4 col-sm-pull-4 col-md-pull-8 col-lg-pull-0">3</div>
</div>

Answer 1

注意你为每一列设置的 push 和 pull 类，在 lg 大小你需要重置那些被设置为较小的尺寸。因此，对于第一列，您需要重置 push 而不是 pull，对于第二列，您需要重置两者:

<div class="row">
   <div class="col-xs-4 col-sm-push-8 col-md-push-4 col-lg-push-0">1</div>
   <div class="col-xs-4 col-sm-pull-4 col-md-push-4 col-lg-pull-0 col-lg-push-0">2</div>
   <div class="col-xs-4 col-sm-pull-4 col-md-pull-8 col-lg-pull-0">3</div>
</div>

Demo fiddle

更新

要回答您关于为什么在这种情况下不需要重置中等尺寸的中间柱的拉力的问题:

Bootstrap 使用 left 和 right CSS 属性分别推拉列，当您处于中等大小断点时，两个属性都已设置(因为值来自较小的尺寸传播到较大的尺寸)，当发生这种情况时，它在 CSS specification 中定义left 属性 (push) 具有优先权，而 right 属性实际上被忽略了。

这意味着如果您要以相反的顺序设置类，先推再拉，您将需要使用 col-md-push-0 重置左侧属性:

<div class="col-sm-pull-4 col-md-push-4">No Reset (Push has precedence)</div>
<div class="col-sm-push-4 col-md-pull-4 col-md-push-0">Reset is needed</div>