bootstrap 跨行

在 Bootstrap 中，可以使用 `class="row"` 将多个列组合成一个行。这样可以让这些列在同一行中排列，而不会跨行。如果在一个行中放置的列的总宽度超过了 12 列，那么多余的列会自动换行到下一行。

如果你想要一个列跨越多个行，可以使用 `class="col-*-*"` 中的第二个星号来实现。例如，`class="col-md-6 col-lg-4"` 表示该列在中等屏幕上占用 6 列，在大屏幕上占用 4 列。如果你希望该列在小屏幕上跨越两行，可以使用 `class="col-sm-12 col-md-6 col-lg-4"`，其中 `class="col-sm-12"` 表示该列在小屏幕上占据 12 列，也就是整个屏幕宽度，从而实现跨行的效果。

相关问题

bootstrap 添加行

在Bootstrap中添加行的方法有两种：使用容器（Container）和使用栅格系统（Grid System）。

1. 使用容器（Container）：
容器是Bootstrap中用于包裹内容的基本结构。通过在容器内添加行（Row）和列（Column），可以实现页面的布局。要添加行，可以按照以下步骤进行操作：
- 在HTML文件中，找到需要添加行的位置。
- 在该位置内添加一个容器元素，例如`<div class="container">`。
- 在容器内部添加行元素，例如`<div class="row">`。
- 在行内部添加列元素，例如`<div class="col">`。
- 在列内部添加内容。

示例代码：

   <div class="container">
     <div class="row">
       <div class="col">
         <!-- 在这里添加内容 -->
       </div>
     </div>
   </div>

2. 使用栅格系统（Grid System）：
Bootstrap的栅格系统是一种灵活的网格布局系统，可以将页面划分为12个等宽的列。通过在行内添加列，可以实现自适应的布局效果。要添加行，可以按照以下步骤进行操作：
- 在HTML文件中，找到需要添加行的位置。
- 在该位置内添加一个容器元素，例如`<div class="container">`。
- 在容器内部添加行元素，例如`<div class="row">`。
- 在行内部添加列元素，例如`<div class="col">`。
- 在列内部添加内容。

示例代码：

   <div class="container">
     <div class="row">
       <div class="col">
         <!-- 在这里添加内容 -->
       </div>
     </div>
   </div>

bootstrap 刷新行

如果你想在Bootstrap中刷新行，可以使用以下方法：

1. 使用 `row` 的 `clearfix` 类

在Bootstrap中，可以使用 `clearfix` 类来清除浮动。将这个类添加到 `row` 中的最后一个元素，可以让整行重新开始。

示例代码：

<div class="row">
  <div class="col-md-4">Column 1</div>
  <div class="col-md-4">Column 2</div>
  <div class="col-md-4 clearfix">Column 3</div>
</div>

在这个示例中，第三列的元素具有 `clearfix` 类，使得整行重新开始。

2. 使用 `row` 的 `d-flex` 和 `flex-wrap` 类

另一种方法是使用 `row` 的 `d-flex` 和 `flex-wrap` 类。这会将行变为 Flexbox 容器，并使其自动换行。如果你需要在行中添加新的元素，它们将自动另起一行。

示例代码：

<div class="row d-flex flex-wrap">
  <div class="col-md-4">Column 1</div>
  <div class="col-md-4">Column 2</div>
  <div class="col-md-4">Column 3</div>
</div>

在这个示例中，行被设置为 Flexbox 容器，并且使用了 `flex-wrap` 类，使其自动换行。如果你需要在行中添加新的元素，它们将自动另起一行。