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

Question

提问by karns

That title might not be very accurate but here is the situation:

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

The html that does not look proper The view that does not look proper As you can see in the HTML, The grid system goes from ~~4 images on xl screens to~~3 on lg screens to 2 on anything less.

看起来不正确的 html The view that does not look proper 正如您在 HTML 中所见，网格系统从~~xl 屏幕上的 4 个图像到~~lg 屏幕上的 3~~个图像，再到~~更少的 2~~个图像~~。

I am trying to get it to display properly - the proper amount of images at each screen size, that is. However, something funky is going on and can't quite figure it out using bootstraps classes.

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

It seems to me that I would have to add rows dynamically at each break-point.

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

Any suggestions?

有什么建议？

-- UPDATE --Just realized that col-xl-* doesn't exist. However, that does not change the situation at all. Please disregard the xl declaration.

-- 更新 --刚刚意识到 col-xl-* 不存在。然而，这根本没有改变这种情况。请忽略 xl 声明。

-- UPDATE 2 --Updated images.

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

-- UPDATE 3 --I'll try to clarify my goal. For that specific image attached in my post, I would like for 3 boxes to appear per row - not all helter skelter.

-- 更新 3 --我会努力阐明我的目标。对于我帖子中附加的特定图像，我希望每行显示 3 个框 - 不是所有的急速滑行。

When it collapses down to 2 boxes per row (xs device), I want to make sure every row has 2 boxes.

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

Answer 1

采纳答案by Dygestor

I solved this issue by adding clearfixelements where they should be. I wanted 3 columns on mdand 2 columns on smand this is how I did it:

我通过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>

So i used clearfix visible-smafter every second div and clearfix visible-mdafter every third div. I don't find this solution ideal, but it works rather well.

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

EDIT:As of Bootstrap v3.2.0 .visible-*classes are deprecated.

编辑：自 Bootstrap v3.2.0.visible-*类已弃用。

http://getbootstrap.com/css/#responsive-utilities:

http://getbootstrap.com/css/#responsive-utilities：

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling -related elements.

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也存在，但自 v3.2.0 起已弃用。它们大致等效于 .visible-*-block，除了用于切换相关元素的其他特殊情况。

EDIT 2:This solution works as long as you do not want to edit CSS, if you have the option to do so, I recommend you use Jonas's answeras it is much simpler in my opinion.

编辑 2：只要您不想编辑 CSS，此解决方案就有效，如果您可以选择这样做，我建议您使用Jonas 的答案，因为在我看来它要简单得多。

Answer 2

回答by Jonas ?ppelgran

Extend your bootstrap.css with this css:

用这个 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;}
}

Use it like:

像这样使用它：

<div class="row auto-clear">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
        <p>Hey</p>
    </div>
</div>

Note:this requires the use of all col-sizes and that all cols are of the same size.

注意：这需要使用所有 col-sizes 并且所有 cols 的大小相同。

Answer 3

回答by KFunk

An .scss fix using bootstrap variables, taken from @jonas and @yog

使用自举变量的 .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);
  }
}

Answer 4

回答by Bart Jedrocha

The reason why your layout is breaking is due to the dynamic height of the images being presented. The fix is simple though, just constrain the height of the images. For example

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

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

Check out the CodePento see it in action. Hope this helps.

查看CodePen以查看它的运行情况。希望这可以帮助。

Answer 5

回答by e.g-m

Adding to @Jonas and @KFunk's answer:

添加到@Jonas 和@KFunk 的回答中：

Potential fix for requiring the use of all col-sizes (col-xs-6 col-sm-4 col-md-4 col-lg-4).

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

Classes created: auto-clear-xs, auto-clear-sm, auto-clear-md and auto-clear-lg.

创建的类：auto-clear-xs、auto-clear-sm、auto-clear-md 和 auto-clear-lg。

I've made my answer mobile-first.

我的回答是移动优先。

Note: This still requires the columns to be the same size.

注意：这仍然需要列的大小相同。

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

Answer 6

回答by Shahzaib Hayat Khan

In case your number of col-boxes in a row is DYNAMICand different for resolution like it is in my case than based on your col-classes do the modulus operator. Take example of below example.

如果您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-6means it has 2 boxes in a row for extra-small devices. so for it I've added that $elementCounter % 2 == 0condition so it is true for every second element ( AFTER ). and added clearfixwith visible-xsso it shouldn't effect on desktop or other resolutions.

col-xs-6意味着它有 2 个连续的盒子用于超小型设备。所以对于它，我已经添加了该$elementCounter % 2 == 0条件，因此对于每个第二个元素（ AFTER ）都是如此。并添加了clearfix，visible-xs所以它不应该影响桌面或其他分辨率。

col-sm-3means 4 boxes in row for small and above devices so in that case i've added $elementCounter % 4 == 0and with that hidden-xsso that clearfix is hidden for xs devices and will be visible for small and above. This way you can modify it accordingly.

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

Answer 7

回答by Rob

You can fix this very easily with css if you don't need to support IE8.

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

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

See examples

查看示例

Answer 8

回答by scooterlord

Looks like the only solution to your problem is to set a min-height or a fixed height to your elements to that there are no inconsistensies that cause your issues.

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

add this:

添加这个：

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

...set height according to your needs

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

Answer 9

回答by matt

Bootstrap 4 introduces hidden-*-upand hidden-*-downclasses. Very handy (and elegant) utility for situations such as these.

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

Available classes
The .hidden-*-upclasses hide the element when the viewport is at the given breakpoint or wider. For example, .hidden-md-uphides an element on medium, large, and extra-large viewports.
The .hidden-*-downclasses hide the element when the viewport is at the given breakpoint or smaller. For example, .hidden-md-downhides an element on extra-small, small, and medium viewports.
There are no explicit “visible”/”show” responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
You can combine one .hidden-*-upclass with one .hidden-*-downclass to show an element only on a given interval of screen sizes. For example, .hidden-sm-down.hidden-xl-upshows the element only on medium and large viewports. Using multiple .hidden-*-upclasses or multiple .hidden-*-downclasses is redundant and pointless.
These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.

可用课程
的.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/

Answer 10

回答by chris

I was looking for a solution as well and since my HTML gets rendered through a CMS I couldn't use the solution of the accepted answer.

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

So my solution is:

所以我的解决方案是：

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

Hope this helps someone :-)

希望这对某人有所帮助:-)

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

提问by karns

采纳答案by Dygestor

回答by Jonas ?ppelgran

回答by KFunk

回答by Bart Jedrocha

HTML

HTML

CSS

CSS

回答by e.g-m

回答by Shahzaib Hayat Khan

回答by Rob

回答by scooterlord

回答by matt

回答by chris

相关推荐

最近更新

标签

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

提问by karns

采纳答案by Dygestor

回答by Jonas ?ppelgran

回答by KFunk

回答by Bart Jedrocha

HTML

HTML

CSS

CSS

回答by e.g-m

回答by Shahzaib Hayat Khan

回答by Rob

回答by scooterlord

回答by matt

回答by chris

相关推荐

twitter-bootstrap Bootstrap 3 水平分隔线（不在下拉列表中）

twitter-bootstrap iOS safari 弄乱了输入类型=日期

twitter-bootstrap Bootstrap 模态和 cookie

twitter-bootstrap 在引导行右侧显示删除按钮，悬停

相关推荐

最近更新

标签