介绍
在前端开发中，页面元素之间的间距调整是非常常见的需求。在这方面，Bootstrap是一个广泛使用的前端框架，并提供了一些内置的间距类来帮助快速开发。不过，由于这些类名比较长，而且类数也比较多，使用起来不是很方便。为了解决这个问题，有人开发出了一个 npm 包，名称叫做 bootstrap-spacing-utils，专门用于提供一些简化版本的 Bootstrap 间距类。今天我们来介绍一下这个 npm 包的使用方法。
安装
在开始使用 bootstrap-spacing-utils 之前，我们需要先安装它。打开控制台，切换到你的项目目录下，执行以下命令：
npm install bootstrap-spacing-utils --save
其中 --save 选项表示将 bootstrap-spacing-utils 添加到你的项目依赖中。
使用
第一步是在你的 HTML 文件中引入 bootstrap-spacing-utils 所提供的 CSS 文件。可以在 <head> 中添加以下代码：
<link rel="stylesheet" href="node_modules/bootstrap-spacing-utils/dist/bootstrap-spacing-utils.css" />
现在，你就可以在页面中使用 bootstrap-spacing-utils 所提供的简化版 Bootstrap 间距类了。
bootstrap-spacing-utils 提供的简化版 Bootstrap 间距类有以下几种：
.m：用于设置外边距。.mt：用于设置上外边距。.mr：用于设置右外边距。.mb：用于设置下外边距。.ml：用于设置左外边距。.p：用于设置内边距。.pt：用于设置上内边距。.pr：用于设置右内边距。.pb：用于设置下内边距。.pl：用于设置左内边距。
所有的类名都可以后面添加一个数字，表示要设置的像素值。
例如，如果要设置一个元素的左外边距为 20 像素，则可以添加如下代码：
<div class="ml-20"> 这是一段文本。 </div>
此时，该 div 元素的左外边距就会变成 20 像素。
示例代码
下面是一个完整的示例代码，可以帮助你更好地理解 bootstrap-spacing-utils 的使用方法。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- --------- ---- ------------ ----- ---------------- ---------------------------------------------------------------------------- -- ------- ------ ---- ----------- ------ --- -------------------- ----------- -- ----------- ---- ----- ------- ------ ----------------------- ---- ---- ------ ------- -------展开代码
在上面的示例中，使用了 .m-20 和 .p-10 类来设置一个大 div 元素的外间距和内间距。使用了 .mb-20 类来设置一个 h1 元素的下边距。使用了 .ml-5、.mr-5、.pt-10 和 .pb-10 类来设置一个 p 元素的边距。
总结
以上就是 bootstrap-spacing-utils 的使用方法。它可以帮助我们更方便、更快速地设置 Bootstrap 间距类。当然，如果你觉得 bootstrap-spacing-utils 提供的简化版 Bootstrap 间距类已经无法满足你的需要，还是建议直接使用原生的 Bootstrap 间距类，以便获得更加完整的样式控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e2d9381d61a354099e
