Html Bootstrap 中的“拉中心”：A -D- B -E- C 列折叠到 ABC // DE，如何在 D 和 E 之间获得 B？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36676140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"Pull center" in Bootstrap: A -D- B -E- C columns collapsing to A-B-C // D-E, how to get B between D and E?
提问by user56reinstatemonica8
I'm notasking for simple center aligning of columns in bootstrap. That's easy and has been covered already, those solutions don't apply to what I'm trying to do here.
我不是要求在引导程序中对列进行简单的居中对齐。这很容易并且已经涵盖，这些解决方案不适用于我在这里尝试做的事情。
What I want, is a layout that is five column on wide devices, 2 - 3 - 2 - 3 - 2, collapsing down to have the three 2 columns 4 - 4 - 4, then the two 3 columns 6 - 6.
我想要的是在宽设备上有五列的布局，2 - 3 - 2 - 3 - 2，折叠起来有三个 2 列 4 - 4 - 4，然后是两个 3 列 6 - 6。
Something like this:
像这样的东西：
<div class="row">
<div class="col-xs-4 col-md-2 pull-left">
A
</div>
<div class="col-xs-4 col-md-2 pull-center">
<!-- of course, pull-center doesn't exist, it's here to illustrate intention -->
B
</div>
<div class="col-xs-4 col-md-2 pull-right">
C
</div>
<div class="col-xs-6 col-md-3">
D
</div>
<div class="col-xs-6 col-md-3">
E
</div>
</div>
Which, if pull-centerexisted and float: middleexisted, would look like this on a wide device:
如果pull-center存在并且float: middle存在，在宽设备上看起来像这样：
A- _D_ B- _E_ C-
...and like this on a narrow device:
...在狭窄的设备上是这样的：
-A-- -B-- -C--
__D___ __E___
...but, because there's no such thing as pull-centeror float: middle;, currently looks like this:
...但是，因为没有pull-centeror之类的东西float: middle;，目前看起来像这样：
A- B- _D_ _E_ C-
How can I get my Bcolumn to float between the two columns below it in the HTML? I've tried adding various pull-classes and floatCSS to the D and E columns but can't find anything that helps.
如何让我的B列在 HTML 中它下面的两列之间浮动？我尝试将各种pull-类和floatCSS添加到 D 和 E 列，但找不到任何有用的东西。
回答by Claire Lee
I think here is you want:
我想这是你想要的：
<div class="row">
<div class="col-xs-4 col-md-2">
A
</div>
<div class="col-xs-4 col-md-2 col-md-push-3">
B
</div>
<div class="col-xs-4 col-md-2 col-md-push-6">
C
</div>
<div class="col-xs-6 col-md-3 col-md-pull-4">
D
</div>
<div class="col-xs-6 col-md-3 col-md-pull-2">
E
</div>
</div>
I Use Bootstrap column ordering.
我使用Bootstrap 列排序。
It can easily change the order of responsive columns.
它可以轻松更改响应列的顺序。
Hope it helps.
希望能帮助到你。
For explanation :
解释：
(Original order)
（原订单）
(New order)
（新命令）
push-* (move right * steps)
push-*（向右移动*步）
pull-* (move left * steps)
pull-*（左移*步）
B => from (3) to (6) => push 3 steps
B => 从 (3) 到 (6) => 推 3 步
C => from (5) to (11) => push 6 steps
C => 从 (5) 到 (11) => 推 6 步
D => from (7) to (3) => pull 4 steps
D => 从 (7) 到 (3) => 拉 4 步
E => from (10) to (8) => pull 2 steps
E => 从 (10) 到 (8) => 拉 2 步
回答by KrisD
Instead of using float, you can make use of .col-*-push-*and .col-*-pull-*Bootstrap modifier classes to change the position of the elements.
除了使用浮动的，你可以利用.col-*-push-*和.col-*-pull-*引导修饰符的类来改变元素的位置。
You will end up with something like the following:
您最终会得到如下结果：
<div class="row">
<div class="col-xs-4 col-md-2">
A
</div>
<div class="col-xs-4 col-md-2 col-md-push-3">
B
</div>
<div class="col-xs-4 col-md-2 col-md-push-6">
C
</div>
<div class="col-xs-6 col-md-3 col-md-pull-4">
D
</div>
<div class="col-xs-6 col-md-3 col-md-pull-2">
E
</div>
</div>
See example.
参见示例。
