在Bootstrap中，行（Row）和列（Column）是构建响应式网格布局的核心组件。它们允许我们创建灵活的网格系统，以便在不同的屏幕尺寸下进行布局。
行（Row）
行（Row）是Bootstrap中的一个容器，用于包含一组列。通过将内容放置在行内，我们可以创建水平排列的列，并控制其在不同屏幕尺寸下的布局。下面是一个示例：
代码语言：javascript复制<div class="row">
<!-- 列内容 -->
</div>在上述示例中，我们使用<div>元素创建了一个行，并添加了.row类。
行可以包含一个或多个列，并且总宽度应该等于12列。如果超过12列，那么多余的列会自动换行到下一行。
列（Column）
列（Column）是行的子元素，用于将内容放置在网格布局中的特定位置。通过指定列的宽度和偏移量，我们可以控制内容在不同屏幕尺寸下的布局。下面是一个示例：
代码语言：javascript复制<div class="row">
<div class="col-6">
<!-- 左侧内容 -->
</div>
<div class="col-6">
<!-- 右侧内容 -->
</div>
</div>在上述示例中，我们在一个行中创建了两个列。每个列都使用col-类指定了列的宽度。在这种情况下，.col-6表示每个列占据行的一半宽度，因此左侧和右侧内容将并排显示。
Bootstrap使用12列的网格系统。可以使用.col-类来指定列的宽度，如.col-6表示占据一半宽度，.col-4表示占据四分之一宽度，以此类推。
除了指定列的宽度，我们还可以使用偏移量（Offset）和列排序（Ordering）类来调整列的布局。偏移量类用于在行中创建空白列，而列排序类用于控制列的顺序。
以下是一些常用的列类：
.col-: 默认列，占据所有可用空间.col-{breakpoint}-auto: 自动宽度列，在指定的断点处自动换行.col-{breakpoint}-{number}: 在指定的断点处占据指定数量的列.offset-{breakpoint}-{number}: 在指定的断点处创建指定数量的偏移列.order-{breakpoint}-{number}: 在指定的断点处设置列的顺序
示例
下面是一个示例，演示如何使用行和列创建响应式网格布局：
代码语言：javascript复制<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">博客文章1</h5>
<p class="card-text">这是博客文章1的内容。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">博客文章2</h5>
<p class="card-text">这是博客文章2的内容。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">博客文章3</h5>
<p class="card-text">这是博客文章3的内容。</p>
</div>
</div>
</div>
</div>
</div>在上述示例中，我们创建了一个容器（.container），其中包含一个行（.row）。行中包含了三个列（.col-lg-4 col-md-6）。
- 在大型屏幕（大于等于lg断点）上，每个列占据4个网格列的宽度（
.col-lg-4），即一行同时显示3个列。 - 在中等屏幕（大于等于md断点，小于lg断点）上，每个列占据6个网格列的宽度（
.col-md-6），即一行同时显示2个列。 - 在小于md断点的屏幕上，每个列会自动换行，占据100%的宽度。
每个列包含一个卡片（.card），其中有博客文章的标题和内容。
通过使用行和列，我们可以创建具有自适应布局的网格系统，以适应不同屏幕尺寸的设备。根据需要，可以调整列的宽度、偏移和排序，以实现所需的布局效果。
