Question

我在重新排序列时遇到问题，当它们具有相同的宽度时将其堆叠起来。这是我网站上的代码：

...
<div class="row">
  <div class="col-md-3 com-sm-4 hidden-xs">col-1 (</div>
  <div class="col-md-6 com-sm-8">col-2 (main content)</div>
  <div class="col-md-3 com-sm-4 hidden-xs">col-3</div>
</div>
...

所以我试图在小型设备上实现的是：

--------- ---------
| col-1 | | col-2 |
|       | |       |
--------- |       |
| col-3 | |       |
|       | |       |
--------- |       |
          ----------

但我得到的是：

--------- ---------
| col-1 | | col-2 |
|       | |       |
--------- |       |
          |       |
          |       |
          |       |
--------- ---------
| col-3 | 
|       | 
---------

如何订购这两个colums？

Answer 1

假设col-2比其他人高，你可以做..

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

演示（选项1）：http://codeply.com/go/E9i34J7QMa

另一种选择是嵌套 ..

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

演示（选项2）：http://codeply.com/go/E9i34J7QMa

Answer 2

这是因为你的col-1和col-2在同一行，但是col-3是分开的。你需要的是：

<div class='row'>
  <div class='col-xs-6'>
    <div class='row'>
      <div class='col-xs-12'>
        Col-1
      </div>
    </div>
    <div class='row'>
      <div class='col-xs-12'>
        Col-3
      </div>
    </div>
  </div>
  <div class='col-xs-6'>
    Col-2
  </div>
</div>

Answer 3

使用行div分隔最后一个，然后使用col类进行调整。我相信我已经得到了你正在寻找的here。如果单击移动设备，则无需空格即可正确堆叠。

以下是代码：

<div class="row col-md-8">
<div class="col-md-6 col-xs-4 " style="background:lightblue">col-1 (</div>
<div class="col-md-6 col-xs-8" style="background:green">col-2 (main content)</div>
</div>
 <div class="row col-md-4">
 <div class="col-md-12 col-sm-2 col-xs-4" style="background:lightblue">col-3</div>
</div>

Bootstrap命令列的宽度相同

3 个答案: