Bootstrap列和行

Question

我使用的引导列最多允许12个。我需要一行中有两个不同的div，一个有12个col，另一个4.我需要4个col中的一个出现在12个中意味着两个div都在同一行。请问我该如何做到这一点。感谢。

Answer 1

首先，您可以将主容器拆分为两列，例如50/50，在内部，您可以放置​​下一列。

<div class="container">
  <div class="col-md-6>
    <div class="col-md-3></div>
    <div class="col-md-3></div>
    <div class="col-md-3></div>
    <div class="col-md-3></div>
  </div>
  <div class="col-md-6>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
    <div class="col-md-1></div>
  </div>
</div>

Answer 2

您可以按照以下步骤进行操作：

1. 转到Customize Bootstrap页面。
2. 将@grid-columns变量的值从12增加到16。
3. 编译并下载修改后的css。

然后您将能够连续使用16列而不是12列，如下所示。

<div class="row">
    <div class="col-xs-12"></div>
    <div class="col-xs-4"></div>
</div>