以下是 Bootstrap 4 网格系统的基本概念：
1. 行（Row）：
行是列的容器，用于包裹列以确保正确的布局。使用 .row 类来创建行：
<div class="row">
<!-- 列将放置在这里 -->
</div>
2. 列（Column）：
列是网格系统的基本单位，用于放置内容。Bootstrap 4 的列使用 12 栅格系统，即一行被分为 12 列。你可以使用 .col-* 类定义列的宽度，其中 * 表示占据的列数。
<div class="row">
<div class="col-md-6">
<!-- 占据6列的列 -->
</div>
<div class="col-md-6">
<!-- 占据6列的列 -->
</div>
</div>
在这个例子中，两个列各占据了行的一半。
3. 偏移和排序：
除了指定列的宽度外，你还可以使用偏移（Offset）和排序（Order）来调整布局。例如，使用 .offset-md-* 类可以将列向右偏移指定数量的列。
<div class="row">
<div class="col-md-6 offset-md-3">
<!-- 占据6列的列，向右偏移3列 -->
</div>
</div>
使用 .order-* 类可以改变列的显示顺序：
<div class="row">
<div class="col-md-6 order-md-2">
<!-- 占据6列的列，在大屏幕上显示在第二位 -->
</div>
<div class="col-md-6 order-md-1">
<!-- 占据6列的列，在大屏幕上显示在第一位 -->
</div>
</div>
4. 响应式布局：
Bootstrap 4 的网格系统是响应式的，可以适应不同的屏幕尺寸。通过使用不同的 .col-* 类，你可以定义在不同屏幕尺寸上的列宽。
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<!-- 在小屏幕上占据12列，在中等屏幕上占据6列，在大屏幕上占据4列 -->
</div>
</div>
在这个例子中，列在小屏幕上占据整行，中等屏幕上占据一半，大屏幕上占据四分之一。
以上是 Bootstrap 4 网格系统的一些基本概念。通过合理使用行、列、偏移和排序，你可以创建出适应不同屏幕尺寸的响应式布局。确保查阅 [Bootstrap 4 网格系统文档](https://getbootstrap.com/docs/4.6/layout/grid/) 以获取更详细的信息和选项。
转载请注明出处：http://www.zyzy.cn/article/detail/5482/Bootstrap