58

该标题可能不是很准确，但情况如下：

看起来不正确的html 看起来不合适的观点 正如您在 HTML 中看到的那样，网格系统从xl 屏幕上的 4 个图像到lg 屏幕上的 3 个图像，再到更少的 2 个图像。

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

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

有什么建议么？

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

-- 更新 2 -- 更新的图像。

-- 更新 3 -- 我将尝试澄清我的目标。对于我帖子中附加的特定图片，我希望每行出现 3 个框 - 不是所有的仓促。

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

4

10 回答 10

71

用这个 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-size 并且所有 cols 的大小相同。

于 2015-11-05T09:19:39.263 回答
44

clearfix我通过在应该在的地方添加元素来解决这个问题。我想要 3 列md和 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在每两个 divclearfix visible-md之后和每三个 div 之后使用。我觉得这个解决方案并不理想，但效果很好。

编辑： 从 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 的答案，因为我认为它更简单。

于 2015-05-01T09:34:51.650 回答
11

使用引导变量的 .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);
  }
}
于 2016-01-07T20:22:05.533 回答
3

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

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以了解它的实际效果。希望这可以帮助。

于 2014-11-15T18:36:07.510 回答
1

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

要求使用所有 col-size 的潜在修复 (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;
  }
}
于 2017-04-20T16:28:26.443 回答
1

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/

于 2016-10-13T20:39:53.190 回答
0

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

添加这个：

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

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

于 2014-11-15T16:48:36.960 回答
0

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

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

查看示例

于 2014-12-03T21:55:37.243 回答
0

如果您col-连续的框数是动态的，并且在我的情况下与基于您的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 并且对于小型及以上设备可见。这样您就可以相应地对其进行修改。

于 2018-04-16T13:42:14.330 回答
0

我也在寻找解决方案，由于我的 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>

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

于 2015-12-01T14:53:58.823 回答