如何在一行中管理混合列类 - Bootstrap

Question

我正在寻找获得特定布局的方法，如下图所示：

到目前为止，我的编程方式如下：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 a">a</div>
    <div class="col-sm-6 col-md-4 b">b</div>
    <div class="col-sm-6 col-md-4 c">c</div>
  </div>  

  <div class="row">
    <div class="col-sm-6 col-md-4 d">d</div>
    <div class="col-sm-6 col-md-4 e">e</div>
    <div class="col-sm-6 col-md-4 f">f</div>
  </div>  
</div> 

以上代码适用于窗口大小，它与md（及以上）和sm之下匹配。但是在与sm匹配的窗口大小上，会发生以下情况：

如何获得所需的布局？我还创建了一个bootply。

Answer 1

这是因为a，b，c和d，e，f被包装在单独的.row div中。

尝试让每个人都在同一个.row：

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 a">a</div>
    <div class="col-sm-6 col-md-4 b">b</div>
    <div class="col-sm-6 col-md-4 c">c</div>
    <div class="col-sm-6 col-md-4 d">d</div>
    <div class="col-sm-6 col-md-4 e">e</div>
    <div class="col-sm-6 col-md-4 f">f</div>
  </div>  
</div>

以下是updated bootply

Answer 2

只需使用一个row而不是两个。见Column Wrapping

工作示例：

＆＃13;

＆＃13;

.a {
  background-color: green;
}
.b {
  background-color: blue;
}
.c {
  background-color: red;
}
.d {
  background-color: purple;
}
.e {
  background-color: yellow;
}
.f {
  background-color: grey;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 a">a</div>
    <div class="col-sm-6 col-md-4 b">b</div>
    <div class="col-sm-6 col-md-4 c">c</div>
    <div class="col-sm-6 col-md-4 d">d</div>
    <div class="col-sm-6 col-md-4 e">e</div>
    <div class="col-sm-6 col-md-4 f">f</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果由于列高（以及使用单行）而遇到清除浮动的问题，请按照以下方法解决问题。

工作示例：

＆＃13;

＆＃13;

@media (min-width: 992px) {
  .row-grid .col-md-4:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .row-grid .col-sm-6:nth-child(2n+1) {
    clear: left;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row row-grid">

    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/150x150/333/fff?text=A" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/250x250/444/fff?text=B" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/450x550/eee/fff?text=C" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/350x350/f00/fff?text=D" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/350x150/ff0/fff?text=E" class="img-responsive">
    </div>
    <div class="col-sm-6 col-md-4">
      <img src="http://placehold.it/350x650/000/fff?text=F" class="img-responsive">
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;