Question

我比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);
            }
         }

我看到的是，前两个图像是我自己的行，就像我预期的那样，但是下一个图像本身就位于它自己的行的右边，然后最后两个图像在它们自己的行上位于左侧。

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

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

根据视口更改引导行的数量

2 个答案: