引导列浮动问题。 DIVS 需要相同的高度答案

【问题标题】：Bootstrap columns float issue. DIVS need to be same height引导列浮动问题。 DIVS 需要相同的高度
【发布时间】：2015-06-01 04:46:54
【问题描述】：

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

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

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

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

所以基本上...

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

如何强制每 3 个项目后开始一个清晰的行以避免这个

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

【讨论】：

这给了我.. o ooo oo 而不是 ooo ooo
这行得通 .clear-row:nth-child(3n+2) {clear: left;} 知道为什么它需要 +2 吗？ +1 无效。
抱歉没有测试。它实际上应该是 3n+1。检查标记，也许某处有一个流浪的 div。
如果你有一个响应式网格，你需要对每个断点进行不同的清除。更好的答案是不使用引导网格，而是使用不使用浮点数的东西。

【解决方案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;
}

【讨论】：

这也有效。比下面的 Neps 答案有什么优势吗？他的肯定意味着更少的代码。哈。
对于响应式网页设计，flex 比使用floats 和clearfix 更简洁、更可取。正如这里提到的：imstillreallybored.com/2013/08/…“Flex 允许复杂的布局和包含许多子元素的布局更加轻量级和更容易编码（不需要额外的 jank 和丑陋的 clearflxes）”
是的，只要你不需要支持 IE 9 及更低版本，flexbox 就很好
这似乎覆盖了引导响应列宽的使用；我修改了您的标记示例以包含大尺寸的“col-lg-1”，但现在被忽略了：bootply.com/coAnc0jJ8j。
不错！特别是对于动态内容，当您想要显示可变数量的元素时。如果可以的话，我会投票更多。

【解决方案3】：

只需在列 div 中添加 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 */
}

【讨论】：

试过了，但是内容（和高度）是动态生成的，所以无法设置最小高度，因为我不知道最大高度是多少。
不，您将背景颜色添加到article div 在列 div 中，以便它们保持其内容的高度。 col divs min-height 将统一对齐下一行
查看修改后的评论。无法设置最小高度，因为我不知道它是什么。
如果您在视觉示例中查看上方，例如框 1 的绿色区域可以是 article div，但下面的空间来自具有最小高度的 col div。
方框是一个例子。 div 实际上充满了真实的内容。所以我不需要绿色是全高的——我需要容器都是相同的高度，这样它们就会像它们应该的那样每 3 列浮动一次。绿色只是为了展示一些盒子。

【解决方案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

【讨论】：

【解决方案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;
                        }
                    }
                }
            }
        }
    }
}

【讨论】：