Bootstrap列浮动问题.DIVS需要相同的高度

Question

我有动态生成的内容形成3个这样的引导列...

<div class="col-md-4">
  <div class="article">
  content goes here
  </div>
</div>

问题是,当列具有不同的内容时,不同的高度会破坏布局.

为了避免这种情况,我怎样才能强制在每3个项目后启动一个明确的行？

基本上......

Answer 1

如何避免在每3个项目后强制启动清除行

添加一个类并尝试 .your-class:nth-child(3n) {clear: left;}

Answer 2

您还可以尝试使用display:flex;为行中的div添加统一高度,如此bootply所示:http://www.bootply.com/126437

HTML:

    <div class="container">
      <div class="row row-flex row-flex-wrap">
        <div class="col-md-4">
          <div class="article flex-col">
              content goes here
          </div>
        </div>
        <div class="col-md-4">
          <div class="article flex-col">
              content goes here
          </div>
        </div>
        <div class="col-md-4">
          <div class="article flex-col">
              content goes here
          </div>
        </div>
      </div>
    </div>

CSS:

.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}