Question

我试图弄清楚如何在不复制内容的情况下完成某个Bootstrap布局。基本上，我希望将一些内容分为sm / md个断点的2列，然后是lg断点的3列。

对于sm / md，布局如下：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      Item 1<br/>
      Item 2<br/>
      Item 3
    </div>
    <div class="col-sm-6">
      Item 4<br/>
      Item 5<br/>
      Item 6
    </div>
  </div>
</div>

＆＃13;

然后在lg断点上我希望它看起来像这样：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      Item 1<br/>
      Item 2
    </div>
    <div class="col-sm-4">
      Item 3<br/>
      Item 4
    </div>
    <div class="col-sm-4">
      Item 5<br/>
      Item 6
    </div>
  </div>
</div>

＆＃13;

现在我知道我可以通过复制内容并使用hidden / visible类来仅在某些断点处显示某些项目来完成此操作，但我想知道是否可以在不重复内容的情况下实现此目的

我也知道我可以将所有3列设置为col-lg-6，第3列将落在第一列之下，但我希望列中的项目均匀分布，因此它们是相同的高度。

Answer 1

Bootstrap允许您指定多个col-*-*断点。单个列可以具有（例如）col-sm-3 col-md-4 col-lg-6，Bootstrap将根据视口宽度应用适当的大小。

根据您的需要，您可以使用以下内容：

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 1</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 2</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 3</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 4</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 5</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 6</div>
  </div>
</div>

所以我们告诉Bootstrap，如果XS，SM或MD有效，列宽为6/12，如果LG有效，我们使用的列宽为4/12。

如何在不重复内容的情况下完成此Bootstrap布局？

1 个答案: