引导间距类不起作用答案

【问题标题】：Bootstrap Spacing classes not working引导间距类不起作用
【发布时间】：2016-05-10 23:37:11
【问题描述】：

我正在尝试为我的 div/ul 添加间距，如 Bootstrap Utilities Documents 中所示。但它根本不起作用，我什至无法在 Firebug 中跟踪该类。

http://v4-alpha.getbootstrap.com/components/utilities/#spacing

我的 HTML 代码

<div>
    <ul class="p-t-20">
        <li><a href="#" class="fa fa-calendar fa-lg"> Events</a> </li>
    </ul>
</div>

我尝试同时使用 m-t-20 或 p-t-20 或其他组合。但它根本不起作用。我该如何使用这些引导类？

我正在使用这些 Bootstrap CSS 文件。是不是我用错版本了？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

【问题讨论】：

您的链接指向引导程序版本 4，而您的项目中包含版本 3.3.5。也许这就是问题所在，v3.3.5 中不存在间距？

标签： css twitter-bootstrap-3 padding margins

【解决方案1】：

是的，您使用的是旧版本的引导程序。 Demo 3.3.5 这就是它不起作用的原因

如果您使用 V4.0，Demo 在这里可以正常工作

正如 Vucko 所说，您的 Bootstrap 版本没有您在 HTML 结构中使用的类。

<div>
    <ul class="p-t-20">
        <li><a href="#" class="fa fa-calendar fa-lg"> Events</a> </li>
    </ul>
</div>

【讨论】：

【解决方案2】：

测试过，但这个特定的类定义不起作用（不再......）。认为他们删除了特定的课程。

但是例如class="m-y" 确实有效（在 v4.0.0-alpha 中）

【讨论】：

这是一个重要的说明。例如，他们将m-t-3 更改为mt-3

【解决方案3】：

其实这个类是这样的：

{property}{sides}-{size}

示例：mt-1

【讨论】：

太棒了...我也在做同样的事情，并认为我的 Bootstrap 版本错误。但是不，我只是使用了错误的格式。不知道我是怎么注意到的

【解决方案4】：

2021 年的今天，boostrap 5 边距和填充：
保证金
保证金顶部：mt-value
右边距：me-value
保证金底部：mb-value
左边距：ms-value

填充
上边距：pt-value
右填充：pe-value
底部填充：pb-value
Paddig left：ps-value。
值的范围是 0 到 5

【讨论】：

"r" 代表右边，"l" 代表左边不够直观！？ :D
使用 e 和 s 代替非常明显的 r 和 l 的任何理由？
原因是由于 LTR 和 RTL 的文本方向，现在它意味着 Start 和 End 并且边距将根据 direction 属性自动交换边。跨度>
天哪，谢谢。我花了相当多的时间试图弄清楚为什么水平间距不起作用。应该检查文档。
这太荒谬了，有什么理由对这种变化有意义吗？