面试题：CSS中Bootstrap栅格系统的基本工作原理

Question

请简述Bootstrap栅格系统是如何在不同屏幕尺寸下实现网页布局的响应式设计的，包括其关键的类名、断点设置以及如何通过行（row）和列（column）来构建布局结构。

Answer 1

关键类名

1. 容器类：
   • .container：用于固定宽度并居中页面内容，在不同断点有不同的固定宽度值。例如在桌面端大屏幕，其宽度可能是1140px，在小屏幕手机上宽度适配屏幕大小。
   • .container - fluid：占据全部视口（viewport）宽度，即宽度始终为100%。
2. 行类：.row，用于创建水平方向的一组列。它会自动设置margin - left和margin - right为-0.5rem（即-8px），以抵消列的padding，从而确保列之间的间距正确。
3. 列类：
   • 以.col - [断点] - [宽度值]形式命名，例如.col - md - 6表示在中等屏幕及以上断点，该列占据12等分网格中的6份宽度。常见断点有xs（超小屏幕，一般指手机竖向，<576px）、sm（小屏幕，一般指手机横向，≥576px）、md（中等屏幕，一般指平板，≥768px）、lg（大屏幕，一般指桌面显示器，≥992px）、xl（超大屏幕，一般指大尺寸桌面显示器，≥1200px）。
   • 当不指定断点，如.col - 6时，该列在所有断点下都占据12等分网格中的6份宽度。
   • 还有一些特殊列类，如.col - auto，根据内容自动调整宽度。

断点设置

Bootstrap通过媒体查询（media queries）来设置断点。不同版本的Bootstrap断点值略有不同，以Bootstrap 4为例：

1. 超小屏幕（xs）：<576px，没有前缀，如.col - 6在超小屏幕下生效。
2. 小屏幕（sm）：≥576px，前缀为sm，例如.col - sm - 4。
3. 中等屏幕（md）：≥768px，前缀为md，例如.col - md - 3。
4. 大屏幕（lg）：≥992px，前缀为lg，例如.col - lg - 2。
5. 超大屏幕（xl）：≥1200px，前缀为xl，例如.col - xl - 1。

通过行（row）和列（column）构建布局结构

1. 行（row）：是列的容器，通过.row类创建。一个.row内可以包含多个列。例如：

<div class="row">
  <!-- 列内容 -->
</div>

2. 列（column）：基于12列的网格系统。通过不同的列类指定其在不同断点下占据的宽度。例如构建一个两列布局，在中等屏幕及以上，两列各占6份宽度：

<div class="row">
  <div class="col - md - 6">
    第一列内容
  </div>
  <div class="col - md - 6">
    第二列内容
  </div>
</div>

在超小屏幕下，默认列会堆叠显示，即一列占满12份宽度，实现响应式布局。通过组合不同的列类，可以灵活构建各种复杂的网页布局结构，如导航栏、内容区域等。