01.BootStrap -sm -md -lg -xl 区别

BootStrap 是一个流行的前端框架，它提供了一个响应式的网格系统，可以方便地对不同大小的设备进行布局。其中，-sm，-md，-lg，-xl 是用于设置不同大小的设备的类名后缀。

- -sm 表示小屏幕，例如手机设备，屏幕宽度小于576像素。
- -md 表示中等屏幕，例如平板电脑，屏幕宽度大于等于576像素。
- -lg 表示大屏幕，例如笔记本电脑，屏幕宽度大于等于992像素。
- -xl 表示超大屏幕，例如大型显示器，屏幕宽度大于等于1200像素。

通过将这些类名后缀应用到 BootStrap 的网格系统中，可以实现在不同大小的设备上呈现不同的布局效果，从而提高网站的适应性和用户体验。例如，在小屏幕设备上可以使用 -sm 类名后缀来让网格系统变得更加紧凑，以便更好地适应小屏幕的显示区域。

相关问题

react-bootstrap中的容器类

在react-bootstrap中，容器类用于控制内容在页面中的宽度和边距。以下是react-bootstrap中可用的容器类：

1. `.container`：具有固定宽度的中心容器。

2. `.container-fluid`：占据整个屏幕宽度的容器。

3. `.container-{breakpoint}`：根据屏幕宽度在不同的断点上应用不同的容器宽度。

其中，`{breakpoint}`可以是以下任意一个值：`sm`、`md`、`lg`、`xl`和`xxl`，表示不同的屏幕断点。

例如，`.container-sm`类将在小于`sm`屏幕宽度时应用固定宽度的容器。

使用这些容器类可以轻松地控制内容在页面中的布局，并实现响应式设计。

bootstrap布局容器

Bootstrap提供了多种布局容器，可以根据需求选择合适的容器。

1. .container：固定宽度的容器，适用于PC端布局。
2. .container-fluid：宽度自适应的容器，适用于响应式布局。
3. .container-sm、.container-md、.container-lg、.container-xl：分别表示小、中、大、超大屏幕下的固定宽度容器。
4. .row：行容器，包含多个列容器。
5. .col-*：列容器，可以根据不同屏幕大小设置不同的列宽。
6. .col-12、.col-lg-6、.col-md-4、.col-sm-3：分别表示在不同屏幕大小下的列宽设置。

示例代码：

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">
      <p>内容1</p>
    </div>
    <div class="col-md-6 col-lg-4">
      <p>内容2</p>
    </div>
    <div class="col-md-12 col-lg-4">
      <p>内容3</p>
    </div>
  </div>
</div>

以上代码表示一个固定宽度的容器，包含一行三列，列宽在中等屏幕下为6/12，大屏幕下为4/12，最后一列在中等屏幕下和大屏幕下占满整行。