引导网格示例

基本的网格布局，让您熟悉 Bootstrap 网格系统中的构建。

在这些示例中，.themed-grid-col该类被添加到列中以添加一些主题。默认情况下，这不是 Bootstrap 中可用的类。

五个网格层

Bootstrap 网格系统有五层，我们支持的每个设备范围都有一层。每层从最小视口大小开始，并自动应用于较大的设备，除非被覆盖。

三个相等的列

获得三个等宽的列，从桌面开始并扩展到大型桌面。在移动设备、平板电脑及以下设备上，列将自动堆叠。

三等列替代

By using the .row-cols-* classes, you can easily create a grid with equal columns.

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

Two columns

Get two columns starting at desktops and scaling to large desktops.

Full width, single column

No grid classes are necessary for full-width elements.

---

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

---

Mixed: mobile and desktop

The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.

---

混合：移动设备、平板电脑和台式机

---

天沟

使用.gx-*类，可以调整水平间距。

使用.gy-*类来控制垂直排水沟。

使用.g-*类，可以调整两个方向的排水沟。

---

容器

Bootstrap v4.4 中添加的其他类允许容器在特定断点之前为 100% 宽。v5 添加了一个新的xxl断点。