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

Question

我动态生成的内容形成 3 bootstrap 列，像这样...

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

问题是，当列有不同的内容时，不同的高度会破坏布局。

如何在每 3 个项目之后强制开始一个清晰的行来避免这种情况？

所以基本上...

Answer 1

只需将 min-height 添加到您的列 div 以保持统一的布局，如下所示：

HTML:

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

CSS:

.col-md-4 {
    min-height: 200px; /* change to the height value of the longest column in the row */
}

Answer 2

How can I force a clear row to be started after every 3 items to avoid this

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

Answer 3

您也可以尝试使用 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;
}

Answer 4

使用grid nesting:

<div class='row'>
    <div class='col-md-4'>
    </div>
    <div class='col-md-4'>
    <div class='col-md-4'>
        <div class='row'>
            <div class='col-md-12'>
            </div>
        </div>
        <div class='row'>
            <div class='col-md-12'>
            </div>
        </div>
    </div>
</div>
<div class='row'>
    <div class='col-md-4'>
    </div>
    <div class='col-md-4'>
    </div>
    <div class='col-md-4'>
    </div>
</div

Answer 5

有点晚了，但也许有人对此感到高兴：

如果所有列的宽度都相同，您可以执行以下操作：（使用此 CSS 您必须指定所有断点的大小）

//Used to generate the html, not relevant to this question
for(var i=0;i<50;i++){
  jQuery(".row").append(
    '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">'+
    '<h1>Title '+i+'</h1>'+
    '<img src="http://lorempixel.com/'+getRandomInt(300, 700)+'/'+getRandomInt(200, 800)+'">'+
  '</div>');
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

@media (min-width: 0) and (max-width: 544px) {
    .row.same-width .col-xs-1:nth-child(12n + 13), html body > div.container ul.products .col-xs-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-xs-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-xs-2:nth-child(6n + 7), html body > div.container ul.products .col-xs-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-xs-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-xs-3:nth-child(4n + 5), html body > div.container ul.products .col-xs-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-xs-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-xs-4:nth-child(3n + 4), html body > div.container ul.products .col-xs-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-xs-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-xs-6:nth-child(2n + 3), html body > div.container ul.products .col-xs-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-xs-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-xs-12:nth-child(1n + 2), html body > div.container ul.products .col-xs-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-xs-12:nth-child(1n + 2) {
        clear: left
    }
}

@media (min-width: 544px) and (max-width: 768px) {
    .row.same-width .col-sm-1:nth-child(12n + 13), html body > div.container ul.products .col-sm-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-sm-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-sm-2:nth-child(6n + 7), html body > div.container ul.products .col-sm-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-sm-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-sm-3:nth-child(4n + 5), html body > div.container ul.products .col-sm-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-sm-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-sm-4:nth-child(3n + 4), html body > div.container ul.products .col-sm-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-sm-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-sm-6:nth-child(2n + 3), html body > div.container ul.products .col-sm-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-sm-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-sm-12:nth-child(1n + 2), html body > div.container ul.products .col-sm-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-sm-12:nth-child(1n + 2) {
        clear: left
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .row.same-width .col-md-1:nth-child(12n + 13), html body > div.container ul.products .col-md-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-md-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-md-2:nth-child(6n + 7), html body > div.container ul.products .col-md-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-md-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-md-3:nth-child(4n + 5), html body > div.container ul.products .col-md-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-md-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-md-4:nth-child(3n + 4), html body > div.container ul.products .col-md-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-md-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-md-6:nth-child(2n + 3), html body > div.container ul.products .col-md-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-md-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-md-12:nth-child(1n + 2), html body > div.container ul.products .col-md-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-md-12:nth-child(1n + 2) {
        clear: left
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .row.same-width .col-lg-1:nth-child(12n + 13), html body > div.container ul.products .col-lg-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-lg-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-lg-2:nth-child(6n + 7), html body > div.container ul.products .col-lg-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-lg-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-lg-3:nth-child(4n + 5), html body > div.container ul.products .col-lg-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-lg-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-lg-4:nth-child(3n + 4), html body > div.container ul.products .col-lg-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-lg-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-lg-6:nth-child(2n + 3), html body > div.container ul.products .col-lg-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-lg-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-lg-12:nth-child(1n + 2), html body > div.container ul.products .col-lg-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-lg-12:nth-child(1n + 2) {
        clear: left
    }
}

@media (min-width: 1200px) {
    .row.same-width .col-xl-1:nth-child(12n + 13), html body > div.container ul.products .col-xl-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-xl-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-xl-2:nth-child(6n + 7), html body > div.container ul.products .col-xl-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-xl-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-xl-3:nth-child(4n + 5), html body > div.container ul.products .col-xl-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-xl-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-xl-4:nth-child(3n + 4), html body > div.container ul.products .col-xl-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-xl-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-xl-6:nth-child(2n + 3), html body > div.container ul.products .col-xl-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-xl-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-xl-12:nth-child(1n + 2), html body > div.container ul.products .col-xl-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-xl-12:nth-child(1n + 2) {
        clear: left
    }
}

.row img{
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row same-width"></div>

如果您使用的是 SCSS，整个过程会更简洁一些：

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 544px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
) !default;

$grid-columns:               12 !default;

.row.same-width{
    $break-values: map-keys($grid-breakpoints);
    @each $breakpoint in $break-values{

        @if(index($break-values, $breakpoint) < length($break-values)){
            @media (min-width: #{map-get($grid-breakpoints, $breakpoint)}) and (max-width: #{map-get($grid-breakpoints, nth($break-values, index($break-values, $breakpoint)+1))}){
                @for $i from 1 through $grid-columns {
                    @if($grid-columns % $i == 0){
                        .col-#{$breakpoint}-#{$i}:nth-child(#{($grid-columns/$i)}n + #{($grid-columns/$i)+1}){
                            clear: left;
                        }
                    }
                }
            }
        }@else{
            @media (min-width: #{map-get($grid-breakpoints, $breakpoint)}){
                @for $i from 1 through $grid-columns {
                    @if($grid-columns % $i == 0){
                        .col-#{$breakpoint}-#{$i}:nth-child(#{($grid-columns/$i)}n + #{($grid-columns/$i)+1}){  
                            clear: left;
                        }
                    }
                }
            }
        }
    }
}

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

Bootstrap columns float issue. DIVS need to be same height

html

css

grid

twitter-bootstrap