Demo

Question

我在一个div内部有3个div，水平对齐。

| 1 | 2 | 3 |

在较小的设备中，我希望3移动到1以下，看起来像这样：

| 1 | 2 |

| 3 | 2 |

我可以创建不同的布局，但是无论如何要使用网格在bootstrap中做？

修改

以下是我想要实现的目标。在桌面上，我希望它看起来像这样： enter image description here

在移动设备中：

enter image description here

Answer 1

Demo

HTML：

<div class="col-xs-4 col-sm-4" style="height:100px;background:red;">A</div>
<div class="col-xs-8 col-sm-4 float" style="height:100px;background:blue">B</div>
<div class="col-xs-4 col-sm-4" style="height:100px;background:green">C</div>

CSS：

@media (max-width: 768px) 
  { 
    .float
    {
      float:right!important;
      height:200px!important;
    } 
  }

Answer 2

是的，您可以通过col-sm-push和col-sm-pull类似的帖子来完成;

<强> Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

另请查看详细信息here。

Answer 3

我假设您希望第3个方框直接位于第1个方框的下方，而第2个方框高于第1个方框。这只能在Bootstrap中通过复制第三个框的内容并根据网格大小隐藏/显示它来实现（例如sm）。使用例如推动或拉动柱子。 col-sm-push-4，不会有帮助，因为他们永远不会将列换行到下一行。

由于Bootstrap是移动第一框架，第一步是创建小布局。为了将第3个框直接放在第1个框的下方，我们需要使用column nesting。我们的想法是将第一个和第三个框放在外部网格左列内的内部网格中，而第二个框放在外部网格的右列中。请注意，内部网格需要.row来抵消其父级col-xs-6的填充，并且内部网格中的列数最多为12个。有些人认为它需要计数到6个存在于col-xs-6内，但事实并非如此。

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box--one">One</div>
        </div>
        <div class="col-xs-12">
          <div class="box box--three">Three</div>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="box box--two">Two</div>
    </div>
  </div>
</div>

小布局现在看起来不错。要获得其他布局（我假设md为其断点），请将col-xs-6更改为col-xs-6 col-md-4，并将第3列添加到包含第3个框的外部网格。

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">
      ...
    </div>
    <div class="col-xs-6">
      ...
    </div>
    <div class="col-md-4">
      <div class="box box--three">Three</div>
    </div>
  </div>
</div>

现在看起来完全坏了，第三个框显示两次，其中一个在小于md的屏幕上与第一个和第二个框重叠。我们可以通过包含特定网格大小的第3个框的hiding the columns来解决此问题。要隐藏内部网格中的第3个框以获得更大的屏幕，请将<div class="col-sm-12">更改为<div class="col-sm-12 hidden-md hidden-lg">。要隐藏较小屏幕的第3个外部列，请将<div class="col-md-4">更改为<div class="col-md-4 hidden-xs hidden-sm">

请参阅下面的完整示例代码：

.box {
  border: 1px solid #c66;
  background-color: #f99;
  padding: 15px;
  color: #fff;
  font-family: Helvetica, Arial;
  font-size: 24px;
}
.box--one,
.box--three {
  height: 100px;
}
.box--two {
  height: 200px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box--one">One</div>
        </div>
        <div class="col-xs-12 hidden-md hidden-lg">
          <div class="box box--three">Three</div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-md-4">
      <div class="box box--two">Two</div>
    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
      <div class="box box--three">Three</div>
    </div>
  </div>
</div>

PS 如果您不喜欢复制第3个框，因为可能内部有很多内容，您还可以使用JavaScript在发生断点更改时将框移动到正确的列中。我已经制作了一些应该能够做到这一点的jQuery插件原型，请参阅https://github.com/ckuijjer/jquery-breakpointspy

PS 我刚刚看到您更新的问题：如果这些框具有固定的高度，只需将类添加到获得固定高度的大型布局的第3个框中。如果它们没有固定的高度，请创建一些将高度设置为相等的JavaScript并将其附加到resize事件。一个完全不同的解决方案是调查flexbox。

将引导程序中的列组合为较小的设备

3 个答案:

Demo