在执行多响应列时清除行 – 引导
这个标题可能不是很准确，但这里是情况：
正如你在HTML中看到的那样，网格系统从xl屏幕上的4个图像到 lg屏幕上的3 个图像，减less到2个。
我试图让它正确显示 – 在每个屏幕大小的适当数量的图像，也就是说。 然而，一些奇怪的事情正在发生，并不能使用引导类来弄清楚。
在我看来，我将不得不在每个断点处dynamic添加行。
有什么build议么？
– 更新 –只是意识到col-xl- *不存在。 但是，这并没有改变这种情况。 请忽略xl声明。
– 更新2 –更新的图像。
– 更新3 –我会尽力澄清我的目标。 对于在我的文章中附加的特定图像，我想每行出现3个盒子 – 并不是所有的人都会出现问题。
当它折叠成每行2个盒子（xs设备）时，我想确保每行都有2个盒子。
我通过添加clearfix元素来解决这个问题。 我想要sm上的3列和2列上sm ，这就是我做到这一点：
<div class="row"> <div class="col-sm-6 col-md-4"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-md"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 col-md-4"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-md"></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 col-md-4"></div> </div>
所以我在每隔一秒使用clearfix visible-sm ，每隔clearfix visible-md 。 我不觉得这个解决scheme是理想的，但它工作得很好。
编辑：由于Bootstrap v3.2.0 .visible-*类已被弃用。
http://getbootstrap.com/css/#responsive-utilities ：
类.visible-xs，.visible-sm，.visible-md和.visible-lg也存在，但从v3.2.0开始不推荐使用。 它们大致等同于.visible – * – block，除了用于切换相关元素的其他特殊情况外。
编辑2：只要你不想编辑CSS，这个解决scheme的工作，如果你有select这样做，我build议你使用乔纳斯的答案，因为它在我看来更简单。
用这个CSS扩展你的bootstrap.css：
@media (min-width:1200px){ .auto-clear .col-lg-1:nth-child(12n+1){clear:left;} .auto-clear .col-lg-2:nth-child(6n+1){clear:left;} .auto-clear .col-lg-3:nth-child(4n+1){clear:left;} .auto-clear .col-lg-4:nth-child(3n+1){clear:left;} .auto-clear .col-lg-6:nth-child(odd){clear:left;} } @media (min-width:992px) and (max-width:1199px){ .auto-clear .col-md-1:nth-child(12n+1){clear:left;} .auto-clear .col-md-2:nth-child(6n+1){clear:left;} .auto-clear .col-md-3:nth-child(4n+1){clear:left;} .auto-clear .col-md-4:nth-child(3n+1){clear:left;} .auto-clear .col-md-6:nth-child(odd){clear:left;} } @media (min-width:768px) and (max-width:991px){ .auto-clear .col-sm-1:nth-child(12n+1){clear:left;} .auto-clear .col-sm-2:nth-child(6n+1){clear:left;} .auto-clear .col-sm-3:nth-child(4n+1){clear:left;} .auto-clear .col-sm-4:nth-child(3n+1){clear:left;} .auto-clear .col-sm-6:nth-child(odd){clear:left;} } @media (max-width:767px){ .auto-clear .col-xs-1:nth-child(12n+1){clear:left;} .auto-clear .col-xs-2:nth-child(6n+1){clear:left;} .auto-clear .col-xs-3:nth-child(4n+1){clear:left;} .auto-clear .col-xs-4:nth-child(3n+1){clear:left;} .auto-clear .col-xs-6:nth-child(odd){clear:left;} }
像这样使用它：
<div class="row auto-clear"> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3"> <p>Hey</p> </div> </div>
注意：这需要使用所有的col尺寸，并且所有的col都具有相同的尺寸。
使用从@jonas和@yog获取的引导variables修复.scss
@mixin row-first-child($col-type) { .col-#{$col-type}- { &1:nth-child(12n+1), &2:nth-child(6n+1), &3:nth-child(4n+1), &4:nth-child(3n+1), &6:nth-child(odd){ clear: left; } } } .auto-clear { @media (min-width: $screen-lg-min){ @include row-first-child(lg); } @media (min-width: $screen-md-min) and (max-width: $screen-md-max){ @include row-first-child(md); } @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){ @include row-first-child(sm); } @media (max-width: $screen-xs-max){ @include row-first-child(xs); } }
布局破坏的原因是由于图像的dynamic高度。 修复很简单，只是限制图像的高度。 例如
HTML
<div class="container"> <div class="row"> <div id="uploaded"> <div class="col-xs-6 col-lg-4"> <div class="file-block"> <div class="file-thumbnail"> <img src="http://placehold.it/200x500" alt=""> </div> <div class="file-row-footer"> <a href="javascript:void(0)"> Delete</a> </div> </div> </div> <div class="col-xs-6 col-lg-4"> <div class="file-block"> <div class="file-thumbnail"> <img src="http://placehold.it/200x500" alt=""> </div> <div class="file-row-footer"> <a href="javascript:void(0)"> Delete</a> </div> </div> </div> </div> </div> </div>
CSS
.file-block { border: 1px solid #ccc; border-radius: 10px; margin: 20px 0px; text-align: center; } .file-thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; height: 180px; font: 0/0 a; /* remove the gap between inline(-block) elements */ } .file-thumbnail:before { content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } .file-thumbnail img { display: inline-block; margin: 0 auto; max-width: 150px; max-height: 180px; vertical-align: middle; }
看看CodePen看看它的行动。 希望这可以帮助。
如果你不需要支持IE8，你可以很容易地用css修复这个问题。
.file-row-contain.col-lg-4:nth-child(3n+1), .file-row-contain.col-xs-6:nth-child(2n+1) { clear: left; }
看例子
添加到@Jonas和@ KFunk的答案：
可能需要使用所有的col-size（col-xs-6 col-sm-4 col-md-4 col-lg-4）。
创build的类：自动清除xs，自动清除sm，自动清除md和自动清除lg。
我先回答了我的答案。
注意 ：这仍然需要列的大小相同。
HTML
<div class="row auto-clear-xs auto-clear-lg"> <div class="col-xs-6 col-lg-3"> <p>Hey</p> </div> </div>
SCSS
@mixin row-first-child($col-type, $clear-type) { .col-#{$col-type}- { &1:nth-child(12n+1), &2:nth-child(6n+1), &3:nth-child(4n+1), &4:nth-child(3n+1), &6:nth-child(odd){ clear: $clear-type; } } } .auto-clear-xs{ @media (min-width: $screen-xs-min){ @include row-first-child(xs, both); } @media (max-width: $screen-xs-min){ @include row-first-child(xs, both); } } .auto-clear-sm{ @media (min-width: $screen-sm){ @include row-first-child(xs, none); @include row-first-child(sm, both); } } .auto-clear-md{ @media (min-width: $screen-md){ @include row-first-child(xs, none); @include row-first-child(sm, none); @include row-first-child(md, both); } } .auto-clear-lg{ @media (min-width: $screen-lg){ @include row-first-child(xs, none); @include row-first-child(sm, none); @include row-first-child(md, none); @include row-first-child(lg, both); } }
CSS
@media (min-width: 480px) { .auto-clear-xs .col-xs-1:nth-child(12n+1), .auto-clear-xs .col-xs-2:nth-child(6n+1), .auto-clear-xs .col-xs-3:nth-child(4n+1), .auto-clear-xs .col-xs-4:nth-child(3n+1), .auto-clear-xs .col-xs-6:nth-child(odd) { clear: both; } } @media (max-width: 480px) { .auto-clear-xs .col-xs-1:nth-child(12n+1), .auto-clear-xs .col-xs-2:nth-child(6n+1), .auto-clear-xs .col-xs-3:nth-child(4n+1), .auto-clear-xs .col-xs-4:nth-child(3n+1), .auto-clear-xs .col-xs-6:nth-child(odd) { clear: both; } } @media (min-width: 768px) { .auto-clear-sm .col-xs-1:nth-child(12n+1), .auto-clear-sm .col-xs-2:nth-child(6n+1), .auto-clear-sm .col-xs-3:nth-child(4n+1), .auto-clear-sm .col-xs-4:nth-child(3n+1), .auto-clear-sm .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-sm .col-sm-1:nth-child(12n+1), .auto-clear-sm .col-sm-2:nth-child(6n+1), .auto-clear-sm .col-sm-3:nth-child(4n+1), .auto-clear-sm .col-sm-4:nth-child(3n+1), .auto-clear-sm .col-sm-6:nth-child(odd) { clear: both; } } @media (min-width: 992px) { .auto-clear-md .col-xs-1:nth-child(12n+1), .auto-clear-md .col-xs-2:nth-child(6n+1), .auto-clear-md .col-xs-3:nth-child(4n+1), .auto-clear-md .col-xs-4:nth-child(3n+1), .auto-clear-md .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-md .col-sm-1:nth-child(12n+1), .auto-clear-md .col-sm-2:nth-child(6n+1), .auto-clear-md .col-sm-3:nth-child(4n+1), .auto-clear-md .col-sm-4:nth-child(3n+1), .auto-clear-md .col-sm-6:nth-child(odd) { clear: none; } .auto-clear-md .col-md-1:nth-child(12n+1), .auto-clear-md .col-md-2:nth-child(6n+1), .auto-clear-md .col-md-3:nth-child(4n+1), .auto-clear-md .col-md-4:nth-child(3n+1), .auto-clear-md .col-md-6:nth-child(odd) { clear: both; } } @media (min-width: 1200px) { .auto-clear-lg .col-xs-1:nth-child(12n+1), .auto-clear-lg .col-xs-2:nth-child(6n+1), .auto-clear-lg .col-xs-3:nth-child(4n+1), .auto-clear-lg .col-xs-4:nth-child(3n+1), .auto-clear-lg .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-sm-1:nth-child(12n+1), .auto-clear-lg .col-sm-2:nth-child(6n+1), .auto-clear-lg .col-sm-3:nth-child(4n+1), .auto-clear-lg .col-sm-4:nth-child(3n+1), .auto-clear-lg .col-sm-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-md-1:nth-child(12n+1), .auto-clear-lg .col-md-2:nth-child(6n+1), .auto-clear-lg .col-md-3:nth-child(4n+1), .auto-clear-lg .col-md-4:nth-child(3n+1), .auto-clear-lg .col-md-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-lg-1:nth-child(12n+1), .auto-clear-lg .col-lg-2:nth-child(6n+1), .auto-clear-lg .col-lg-3:nth-child(4n+1), .auto-clear-lg .col-lg-4:nth-child(3n+1), .auto-clear-lg .col-lg-6:nth-child(odd) { clear: both; } }
这实际上是应该的。 Bootstrap Grid由12列组成，你告诉它将一个lg项目的大小设置为4/12，这是第三个，而xs项目是6/12，这是可用宽度的一半。
如果您检查应用的样式，您会看到col-xs-6与col-lg-4的一个项目的宽度设置为50％和33.33％相同。
你可以在这里阅读关于网格系统的更多信息
编辑：我想我现在明白你的问题，没有看到你的代码，我可能无法给你一个确切的解决scheme。 然而，这个问题似乎是你的盒子的高度变化，如果你把它们放在同一个高度，它应该给你每行盒子的数量。
看起来像解决您的问题的唯一办法是设置一个最小高度或固定高度的元素，因为没有不一致，导致您的问题。
添加这个：
.file-row-contain { min-height:250px; }
…根据您的需求设置高度
我也在寻找解决scheme，因为我的HTML通过CMS呈现，我无法使用接受的答案的解决scheme。
所以我的解决scheme是：
.teaser { // break into new line after last element > div:last-child { clear: right; } } .teaser { // two colums @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { > div:nth-child(2n+1) { clear: left; } } } .teaser { // three colums @media (min-width: @screen-md-min) { > div:nth-child(3n+1) { clear: left; } } }
<link href="ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row teaser"> <div class="col-sm-6 col-md-4">div1</div> <div class="col-sm-6 col-md-4">div2<br>more content</div> <div class="col-sm-6 col-md-4">div3</div> <div class="col-sm-6 col-md-4">div4</div> <div class="col-sm-6 col-md-4">div5<br>more content content<br>content</div> <div class="col-sm-6 col-md-4">div6</div> <div class="col-sm-6 col-md-4">div7<br>more content</div> <div class="col-sm-6 col-md-4">div8</div> </div>
Bootstrap 4引入了hidden-*-up和hidden-*-down类。 非常方便（和优雅）的实用工具，如这些情况。
可用的类
.hidden-*-up类在视口处于给定断点或更宽处时隐藏元素。 例如，.hidden-md-up在中等，大型和超大型视口.hidden-md-up隐藏一个元素。.hidden-*-down类在视口处于给定断点或更小时隐藏元素。 例如，.hidden-md-down在特小，小和中等视口上隐藏一个元素。- 没有明确的“可见”/“显示”响应实用程序类; 通过简单地将它隐藏在断点处的大小，可以使元素可见。
- 您可以将一个
.hidden-*-up类与一个.hidden-*-down类组合在一起，仅在给定的屏幕尺寸间隔内显示元素。 例如，.hidden-sm-down.hidden-xl-up仅在中等和大型视口上显示该元素。 使用多个.hidden-*-up类或多个.hidden-*-down类是多余的和毫无意义的。- 这些类不会尝试适应不常见的情况，即元素的可见性不能表示为视口断点尺寸的单个连续范围; 您将需要在这种情况下使用自定义CSS。
http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
