执行多响应列时清除行 - Bootstrap

Posted 2023-02-22

【中文标题】执行多响应列时清除行 - Bootstrap

【英文标题】：Clear Rows When Doing Multi-responsive Columns - Bootstrap

【发布时间】：2015-01-12 09:10:38

【问题描述】：

这个标题可能不太准确，但情况如下：

正如您在 html 中所见，网格系统从 xl 屏幕上的 4 个图像到 lg 屏幕上的 3 个图像到 lg 屏幕上的 2 个图像。

我正试图让它正确显示 - 即在每个屏幕尺寸下都有适当数量的图像。然而，一些时髦的事情正在发生，并且使用引导类无法完全弄清楚。

在我看来，我必须在每个断点处动态添加行。

有什么建议吗？

-- 更新-- 刚刚意识到 col-xl-* 不存在。但是，这根本不会改变情况。请忽略 xl 声明。

-- 更新 2-- 更新了图片。

-- 更新 3-- 我会努力澄清我的目标。对于我帖子中附加的特定图片，我希望每行显示 3 个框 - 不是所有的仓促。

当它折叠到每行 2 个框（xs 设备）时，我想确保每行有 2 个框。

【问题讨论】：

当您说请忽略时，您是在告诉人们忽略您拥有的 col-xl-* 项目，还是告诉人们完全忽略这个问题？如果是后者，那么你应该删除这个问题。既然您发现了这一点，可能希望至少使用您更新的代码对其进行更新。 :)

这是浮动内容的工作方式。您的网格类正确，最小宽度为 1/3：1200 像素，上下为 50%。如果你想让元素隐藏起来并适合，你会使用砌体脚本或研究 flexbox。或者，您可以阅读文档并使用每 12 列在相关断点处显示的响应式实用程序 clearfix，至少它会清除，但看起来不会很好

啊哈！我没有想到将响应式实用程序与 clearfix 结合使用。我会试试看。

class="clearfix hidden-lg"（每两个 col-xs-6 之后）和 class="clearfix visible-lg 在每 3 个 col-lg-4 之后

在这里查看我的答案：***.com/a/24571644/3577849

【参考方案1】：

用这个 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-sizes 并且所有 cols 的尺寸相同。

【讨论】：

谢谢！我也包括一个 .scss 版本作为答案。

随着年龄的增长，如果有人愿意扩展 Bootstrap css，我发现这个答案会更优雅一些。从长远来看，我发现它更清洁、更易于维护，并且可以减少对 HTML 的污染。

【参考方案2】：

我通过在应有的位置添加 clearfix 元素解决了这个问题。我想要 md 上的 3 列和 sm 上的 2 列，我就是这样做的：

<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>

所以我在每两个 div 之后使用 clearfix visible-sm，在每三个 div 之后使用 clearfix visible-md。我觉得这个解决方案并不理想，但效果很好。

编辑： 从 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，此解决方案就可以工作，如果您可以选择这样做，我建议您使用 Jonas's answer，因为它在我的意见。

【讨论】：

那么，即使它被隐藏它也不会应用清除？我猜这不是因为它是隐藏的，而是因为引导程序必须使用 display:none 而不是 visibility:hidden。我还没有尝试过这个解决方案，但它似乎确实是我所设想的！谢谢！

根据我从 bootstrap.css 中发现的信息，.visible-* 使用 display: none!important;，所以 clearfix 不会应用 clear。此外，自 Bootstrap v3.2.0 起，类 .visible-* 已被弃用，您应该使用 .visible-*-block，它应该具有几乎相同的效果。我会编辑答案。

我对此进行了测试，效果很好！我想这正是我想要的。玩弄小提琴：jsfiddle.net/3muu0jnd.

谢谢！我无法从官方文档中理解它。

您很可能还希望将visible-lg 添加到所有visible-md div 中，因为您是说即使尺寸大于md 也希望一行有3 列。否则，如果浏览器在 lg 范围内，则 clearfix div 将不再可见！

【参考方案3】：

使用引导变量的 .scss 修复，取自 @jonas 和 @yog

@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);
  

【讨论】：

注意：唯一的问题是你必须使用所有 col-xx-xx 类。在您可能使用col-sm-4 col-xs-6 的地方，您必须在.auto-clear 中使用col-lg-4 col-md-4 col-sm-4 col-xs-6。

【参考方案4】：

您的布局中断的原因是所呈现图像的动态高度。修复很简单，只是限制图像的高度。例如

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" >
          </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" >
          </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 以了解它的实际效果。希望这会有所帮助。

【讨论】：

是的，这是一种可能的解决方案。然而，这不是我想要的。我确实希望图像具有动态高度。 +1 替代解决方案。

约束？它违背了让我使用 bs 的原则

【参考方案5】：

Bootstrap 4 引入了 hidden-*-up 和 hidden-*-down 类。对于此类情况非常方便（且优雅）的实用程序。

可用的类

.hidden-*-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/

【讨论】：

鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。

谢谢@pableiros。我已按照您的建议进行了编辑。干杯！

【参考方案6】：

添加到@Jonas 和@KFunk 的答案：

要求使用所有 col-sizes (col-xs-6 col-sm-4 col-md-4 col-lg-4) 的潜在修复。

创建的类：auto-clear-xs、auto-clear-sm、auto-clear-md 和 auto-clear-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;
  

【参考方案7】：

看起来您的问题的唯一解决方案是为您的元素设置一个最小高度或一个固定高度，以确保没有导致您的问题的不一致。

添加这个：

.file-row-contain 
  min-height:250px;

...根据您的需要设置高度

【参考方案8】：

如果您不需要支持 IE8，您可以使用 css 轻松解决此问题。

.file-row-contain.col-lg-4:nth-child(3n+1),
.file-row-contain.col-xs-6:nth-child(2n+1)  
    clear: left; 

见examples

【讨论】：

这不起作用，因为元素同时具有这两个类（.col-lg-4、.col-xs-6），所以它不会响应。

【参考方案9】：

我也在寻找解决方案，由于我的 HTML 是通过 CMS 呈现的，因此我无法使用已接受答案的解决方案。

所以我的解决方案是：

.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="https://maxcdn.bootstrapcdn.com/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>

希望这可以帮助某人:-)

【参考方案10】：

如果您连续的col- 框数是DYNAMIC 并且在我的情况下与基于您的col- 类的分辨率不同，则使用模运算符。以下面的例子为例。

<div class="row">
    <?php $elementCounter = 0; ?>
    <?php foreach ( $this->programs as $program ): ?>
        <div class="col-xs-6 col-sm-3"> DATA </div>
        <?php $elementCounter++; ?>
        <?php if( $elementCounter % 4 == 0 ): ?>
            <div class="clearfix hidden-xs"></div>
        <?php elseif( $elementCounter % 2 == 0 ): ?>
            <div class="clearfix visible-xs"></div>
        <?php endif; ?>
    <?php endforeach; ?>
</div>

col-xs-6 表示它有 2 个连续的盒子用于超小型设备。所以为此我添加了$elementCounter % 2 == 0 条件，因此每隔一个元素（ AFTER ）都是如此。并添加了clearfix 和visible-xs，因此它不会影响桌面或其他分辨率。

col-sm-3 表示小型及以上设备的行中的 4 个框，因此在这种情况下，我添加了 $elementCounter % 4 == 0 和 hidden-xs 以便为 xs 设备隐藏 clearfix并且对于小型及以上将可见。这样你就可以进行相应的修改了。