【Bootstrap V4系列】学习入门教程之 布局

一、容器

容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时是必需的。容器用于容纳、填充和（有时）居中放置其中的内容。虽然容器可以嵌套，但大多数布局不需要嵌套容器。

Bootstrap有三个不同的容器：

• .container，它在每个响应断点处设置最大宽度

• .container-fluid，宽度：所有断点处为100%

• .container-{breakpoint}，宽度：100%，直到指定的断点

下表说明了每个容器的最大宽度与原始.container和.container-fluid在每个断点上的比较。

1.1 All-in-one 一体化

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

1.2 Fluid 流体

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

1.3 Responsive 快速响应

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

容器提供了一种将网站内容居中和水平放置的方法。使用.container作为响应像素宽度或.container流体作为宽度：在所有视口和设备尺寸上100%。

二、栅格系统

Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它采用flexbox制造，反应灵敏。下面是一个例子，深入了解网格是如何组合在一起的。

<!-- How it works -->
<div class="bd-example bd-example-row">
    <div class="container">
        <div class="row">
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
        </div>
    </div>
</div>

页面展示效果：

列类表示您希望在每行可能的12列中使用的列数。所以，如果你想要三个等宽的列，你可以使用.col-4。

2.1 网格选项

使用方便的表格查看Bootstrap网格系统的各个方面如何在多个设备上工作。

2.2 自动布局列

利用断点特定的列类，无需像.col-sm-6这样的显式编号类，即可轻松调整列大小。

等宽

<!-- Equal-width  -->

<div class="container">
    <div class="row">
        <div class="col">
            1 of 2
        </div>
        <div class="col">
            2 of 2
        </div>
    </div>
    <div class="row">
        <div class="col">
            1 of 3
        </div>
        <div class="col">
            2 of 3
        </div>
        <div class="col">
            3 of 3
        </div>
    </div>
</div>

页面展示效果：

等宽多线

<!-- Equal-width multi-line -->
<div class="container">
    <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>
</div>

页面展示效果：

2.3、设置一列宽度

<!-- Setting one column width -->
<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>

页面展示效果：

2.4、可变宽度内容

使用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>

页面展示效果：