Question

是否可以这样做？

我连续有3列。第一列有2个嵌套行 - 顶部和底部。是否可以让第一列的底行位于第四个位置？是移动视图吗？

这是我的代码： http://www.bootply.com/yhhFaWRjC6 编辑：

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row" style="height:100%;">
    <div class="col-md-4 col-lg-4 col-sm-12" style="background-color:#ccc;height:100%; padding:0px;">
      <div class="row">
        <div class="col-md-12 " style="height:180px;background-color:#d33;">one</div>
      </div>
      <div class="row">
        <div class="col-md-12 " style="height:180px;background-color:#edd;">four</div>
      </div>
    </div>
    <div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#e42;">two</div>
    <div class="col-md-4 col-lg-4 col-sm-12" style="height:360px;background-color:#444;color:#fff;">three</div>
  </div>
</div>

＆＃13;

我想让它成为序列： - 一个 - 两个 - 三 - 四在移动设备

Answer 1

假设第一列的高度低于第二列和第三列，我担心你只能通过以下方式实现：

复制第四列的内容并根据网格大小显示/隐藏它（例如xs）。我将在下面展示一个例子。
当网格大小发生变化时，使用JavaScript移动第四列的内容。我有一个jQuery插件的小原型，以便在https://github.com/ckuijjer/jquery-breakpointspy
使用flexbox创建自己的网格系统。如果您不必支持IE9或更低版本，这可能是一个选项。

我已经实施了下面的第一个选项，并做了一些额外的更改：

我已将内联样式移动到名为.one，.two，.three和.four的类中，以使代码更加干净

我已经开始使用移动布局，并为所有课程col-xs-12提供了帮助。这会使列从xs开始占据12列。

<div class="container">
  <div class="row">
    <div class="col-xs-12 one">one</div>
    ...
    <div class="col-xs-12 four">four</div>
  </div>
</div>

由于我们希望每列占据容器的四分之一，因此我已将col-md-4添加到每个列中。每列现在看起来像例如<div class="col-xs-12 col-md-4 one">。无需添加col-lg-4或col-sm-12。
仅在特定网格尺寸上显示列可以通过例如visible-xs-block。由于我们希望第四列仅在xs和sm上可见，因此我已将html更改为<div class="col-xs-12 visible-xs-block visible-sm-block four">four</div>。请注意，我已经删除了col-md-4，因为不再需要它了。
当屏幕为md或lg时，将第四列放在第一列下方，将第一列更改为嵌套网格。我选择不使用第二个.row，因为有超过12列会使下一列删除并使用.col-xs-12，因为我总是希望列上有一个引导网格类，无论屏幕大小。我可以使用visible-md-block和visible-lg-block将其显示在md和lg上，但为了好玩，我使用了它的对面，{{ 1}}和hidden-xs。
```
hidden-sm
```

请参阅以下完整代码：

＆＃13;

<div class="col-xs-12 col-md-4">
  <div class="row">
    <div class="col-xs-12 one">one</div>
    <div class="col-xs-12 hidden-xs hidden-sm four">four</div>
  </div>
</div>

＆＃13;

.one {
  height: 180px;
  background-color: #d33;
}
.two {
  height: 360px;
  background-color: #e42;
}
.three {
  height: 360px;
  background-color: #444;
  color: #fff;
}
.four {
  height: 180px;
  background-color: #edd;
}

＆＃13;

响应视图上的Bootstrap网格排列

1 个答案: