在进行Bootstrap网站设计时，有时我们需要在栅格系统的列之间添加一些边距，但是默认行为是让列适配其内部的内容，这使得列之间的间隔非常小，显得不够美观。那么，如何在Bootstrap列之间添加边距而不使其自动包装呢？本篇文章将详细介绍这个话题。
1. Bootstrap栅格系统
Bootstrap是世界上最受欢迎的前端UI库之一，它提供了丰富的组件和样式，使得我们可以快速搭建响应式，移动设备友好的网站。其中，Bootstrap的栅格系统（Grid System）是其最基础的部分之一，它负责布局并排列网页元素。
Bootstrap栅格系统由12个列组成，在每个列中可以放置不同大小的网页元素。Bootstrap使用CSS的flexbox实现栅格系统，可以让我们轻松地组织网页中的布局。
2. 如何为Bootstrap列之间添加边距
有时，将两个列紧密地放在一起并没有什么问题。但是，当我们需要在两个列之间添加一些空白时，我们可以使用Bootstrap的一些内置类来实现。以下是一些常用的类：
- mx-auto：使元素水平居中；
- m-*：用于设置宿主元素的外边距；
- p-*：用于设置宿主元素的内边距。
通过使用这些类，我们可以轻松地为Bootstrap列之间添加边距。下面的代码段演示了如何在Bootstrap列之间添加一些边距：
<div class="container">
<div class="row">
<div class="col-md-6 p-3">
这是第一个列！
</div>
<div class="col-md-6 p-3">
这是第二个列！
</div>
</div>
</div>
在这个例子中，我们使用了类p-3来添加每个列的内边距。因此，每个列都有一个3个单位的内边距，它们之间留下了一些空白。
2.1 为Bootstrap列之间添加自定义边距
上述代码演示了如何使用内置类使Bootstrap列之间产生一定的边距，但如果我们想要自定义边距的大小呢？在这种情况下，我们可以使用自定义CSS，来设置宿主元素的外边距或内边距。以下是一些自定义CSS的例子：
- .custom-margin { margin: 20px; } 用于设置20个像素的外边界；
- .custom-padding { padding: 10px; } 用于设置10个像素的内边距；
- .custom-left-margin { margin-left: 30px; } 用于设置30像素的左外边距。
无论使用自定义CSS还是内置类，我们都可以用它们来设置Bootstrap列之间的间距。
3. 总结
Bootstrap是一个优秀的前端框架，它提供了很多工具来帮助我们快速地搭建响应式的网站。Bootstrap的栅格系统是布局的基础，我们可以通过使用内置类或自定义CSS来为Bootstrap列之间添加边距。这使得我们可以更好地控制网站的布局，让我们的网站更加美观和易于使用。