根据视口更改引导行数答案

【问题标题】：Changing number of bootstrap rows based on viewport根据视口更改引导行数
【发布时间】：2016-02-18 23:52:26
【问题描述】：

我是 Bootstrap 3 的新手，遇到了一些问题。

我有一排 5 张图像，由以下内容定义：

  .callout {
         .make-sm-column(2.4);
  }

在移动设备上，我希望将这 5 列拆分为一行 2 张图片，然后是最后 3 张图片的第二行。我对网格系统的理解是，如果列/元素不适合预定义的行，它将自动撞到下一个“行”。

基于这种理解，我认为我可以应用这个：

        .callout {
            &:nth-child(-n+2)
            {
                .make-xs-column(6);
            }
            &:nth-child(n+3)
            {
                .make-xs-column(4);
            }
         }

我看到的是，前 2 张图片像我预期的那样是自己的行，但下一张图片本身位于其自己行的右侧，然后最后 2 张图片在自己的行上位于左侧。

【问题讨论】：

为了澄清我之前的问题，我对您对列宽的2.4 实施感到困惑。我不知道你能做到这一点。生成的 CSS 输出是什么？
@isherwood 结果输出在类上应用float: left; width: 20%; padding-left: 15px; padding-right: 15px;

标签： css twitter-bootstrap twitter-bootstrap-3 less

【解决方案1】：

引导网格系统的美妙之处在于您可以使用他们的col 大小分配来完成您想要完成的事情。演示在这里：http://jsfiddle.net/swm53ran/440/（调整结果屏幕的宽度）

<div class="row">
    <div class="col-md-2 col-md-offset-1 img col-sm-6 col-xs-6">img 1</div>
    <div class="col-md-2 img col-sm-6 col-xs-6">img 2</div>
    <div class="col-md-2 img col-sm-4 col-xs-4">img 3</div>
    <div class="col-md-2 img col-sm-4 col-xs-4">img 4</div>
    <div class="col-md-2 img col-sm-4 col-xs-4">img 5</div>
</div>

【讨论】：

这似乎没有为大屏幕创建统一的 5 列布局。
@isherwood，啊，是的，谢谢，我添加了col-md-offset-# 使其更加统一
一个很好的解决方案，但它不使用整个屏幕。我们将不得不看看OP的想法。 jsfiddle.net/isherwood/4gtbh0c4
@isherwood 啊，是的，遗憾的是，12 col 网格不能被 5 整除。如果有一种解决方案可以在这种情况下使用 boostraps 网格来利用全屏而不重修改。我认为这对我自己和一般开发社区非常有用
@indubitablee 这是我的控制台 / 更少 / 屏幕使用全宽的推送图像（我关闭了容器宽度以便它可以拉伸）-puu.sh/loRBp/93887c1741.jpg

【解决方案2】：

通过清除第 3 列的左浮动，我能够使该列在 XS 视口上正确换行到新行。

新的 CSS

         .callout {
            padding: 10px 15px;
                &:nth-child(1)
                {
                    .make-xs-column-offset(1);
                }
                &:nth-child(-n+2){
                    .make-xs-column(5);
                }
                &:nth-child(3)
                {
                    clear: left;
                }
                &:nth-child(n+3)
                {
                    .make-xs-column(4);
                }
            }

【讨论】：