CSS 为什么Bootstrap .row类有一个默认的margin-left为-30px

在本文中，我们将介绍为什么Bootstrap的CSS框架中的.row类具有默认的margin-left为-30px的设计，并解释其背后的原因。

阅读更多：CSS 教程

什么是Bootstrap？

Bootstrap是一个流行的CSS框架，用于为网页设计和开发提供便捷的解决方案。它提供了一套用于网站布局、样式、表单、按钮和其他组件的CSS和JavaScript代码。

.row类的作用

在Bootstrap中，.row类用于创建包含网格系统的行。网格系统是一种用于在网页布局中创建列和行的方法，它让开发者能够轻松地调整和管理网页内容的布局。

.row类的主要目的是创建一行，以便在其中放置一个或多个列。每个列可以根据需要进行调整，以适应各种屏幕尺寸和设备。

margin-left为-30px的原因

在Bootstrap中，.row类具有一个默认的margin-left为-30px的样式规则。这是因为Bootstrap的网格系统使用负边距来解决列之间的间隔问题。

具体来说，Bootstrap的设计者希望通过将每个列的左边距设为-15px，使得每个列在左右两侧有15px的外边距。这样一来，当多个列并排排列时，它们之间的间隔就是30px（两边各15px）。

这个设计决策有两个主要原因：

解决间隔问题：由于列之间存在外边距，没有设置负边距的话，列之间将会出现合并在一起的问题。通过设置负边距，可以让列之间保持适当的间距，以确保布局正常。
方便的容器边界：Bootstrap的容器类（如.container或.container-fluid）是用来包裹整个页面内容的。容器在左右两侧有一个15px的内边距来保持整体布局的一致性。如果不使用负边距，那么.container或.container-fluid与第一个或最后一个列之间将会存在间隔，破坏了整体布局的美感。

综上所述，通过具有默认的margin-left为-30px，.row类可以有效地解决列之间的间距问题，并且容器与第一个或最后一个列之间保持一致的边距。

示例

下面是一个基本的使用.row类的示例：

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

在上面的示例中，.container类用于包裹整个页面内容，.row类用于创建一个行，其中包含两个相等的列（每个列占据了6个网格单元）。由于.row类具有默认的margin-left为-30px，所以两个列之间有一个30px的间距。