引导列浮动问题。 DIVS 需要相同的高度
Posted
技术标签:
【中文标题】引导列浮动问题。 DIVS 需要相同的高度【英文标题】：Bootstrap columns float issue. DIVS need to be same height 【发布时间】：2015-06-01 04:46:54 【问题描述】：我已经动态生成内容，形成 3 个这样的引导列...
<div class="col-md-4">
<div class="article">
content goes here
</div>
</div>
问题是，当列有不同的内容时，不同的高度会破坏布局。
如何强制在每 3 个项目之后开始一个清晰的行以避免这种情况？
所以基本上...
【问题讨论】：
【参考方案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;
【讨论】：
以上是关于引导列浮动问题。 DIVS 需要相同的高度的主要内容，如果未能解决你的问题，请参考以下文章