Ошибка загрузки столбцов Bootstrap. DIVS должны быть одинаковой высоты

У меня есть динамически сгенерированное содержимое, сформированное в 3 столбца начальной загрузки, например...

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

Проблема заключается в том, что когда столбцы имеют различный контент, разные высоты разрушают компоновку.

Как я могу заставить чистую строку запускать после каждых 3 элементов, чтобы избежать этого?

Итак, в основном...

enter image description here

Ответы

Ответ 1

Как я могу заставить чистую строку запускать после каждых 3 элементов, чтобы избежать это

Добавьте класс и попробуйте .your-class:nth-child(3n) {clear: left;}

Ответ 2

Вы также можете попробовать использовать display:flex; для добавления равномерной высоты в divs в строке, как показано в этой строке: 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;
}

Ответ 3

Просто добавьте min-height в свои разделители столбцов, чтобы поддерживать форму в форме:

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 */
}

Ответ 4

Используя вложенность сетки:

<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

Ответ 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" rel="stylesheet"/>

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