布局您的 Bootstrap 项目的组件和选项，包括包装容器、强大的网格系统、灵活的媒体对象和响应性实用工具类。

Containers

容器是 Bootstrap 中最基本的布局元素，在使用我们的默认网格系统时是必需的。选择响应式固定宽度的容器（意味着它max-width在每个断点处的变化）或流体宽度（意味着它100%始终是宽的）。

虽然容器可以嵌套，但大多数布局不需要嵌套容器。

<div class="container">  <!-- Content here --></div>

利用特定于断点的列类进行简单的列调整，而不使用显式编号类，例如.col-sm-6...

<div class="container-fluid">  ...</div>

响应断点

由于 Bootstrap 是首先开发为可移动的，所以我们使用了以下几个媒体查询为我们的布局和接口创建合理的断点。这些断点主要基于最小视口宽度，允许我们随着视口的变化而扩展元素。

等宽列可以分成多行，但存在一个 Safari flexbox 缺陷，如果没有明确的flex-basis或无效的行为，border就可能无法工作。

有两种解决方案已在 Bootstrap 外简化测试用例不过，如果浏览器是最新的，这就不应该是必要的。

<div class="container">  <div class="row">    <div class="col">Column</div>    <div class="col">Column</div>    <div class="w-100"></div>    <div class="col">Column</div>    <div class="col">Column</div>  </div></div>

设置一列宽度

Flexbox 网格列的自动布局还意味着您可以设置一列的宽度并让兄弟列自动调整其大小。您可以使用预定义的网格类（如下所示），网格混合或内联宽度。请注意，无论中央列的宽度如何，其他列都将调整大小。

<div class="container">  <div class="row">    <div class="col">      1 of 3    </div>    <div class="col-6">      2 of 3 (wider)    </div>    <div class="col">      3 of 3    </div>  </div>  <div class="row">    <div class="col">      1 of 3    </div>    <div class="col-5">      2 of 3 (wider)    </div>    <div class="col">      3 of 3    </div>  </div></div>

可变宽度内容

使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。

<div class="container">  <div class="row justify-content-md-center">    <div class="col col-lg-2">      1 of 3    </div>    <div class="col-md-auto">
      Variable width content    </div>    <div class="col col-lg-2">      3 of 3    </div>  </div>  <div class="row">    <div class="col">      1 of 3    </div>    <div class="col-md-auto">
      Variable width content    </div>    <div class="col col-lg-2">      3 of 3    </div>  </div></div>

等宽多列

通过插入.w-100您希望这些列插入到新行的位置。通过混合.w-100和一些响应显示实用程序...

<div class="row">  <div class="col">col</div>  <div class="col">col</div>  <div class="w-100"></div>  <div class="col">col</div>  <div class="col">col</div></div>

响应类

引导程序的网格包括五个预定义类，用于构建复杂的响应性布局。在您认为合适的额外小、小、中、大或超大设备上自定义列的大小。

所有断点

水平堆