引导间距类不起作用

Question

我正在尝试向我的 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">

Answer 1

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

填充
顶部填充：pt-value
右填充：pe 值
底部填充：pb-value
Paddig 左：ps 值。
值的范围是 0 到 5

Answer 2

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

如果您使用V4.0，演示这里工作正常

正如 Vucko 提到的，您的 Bootstrap 版本没有您在 HTML 结构中使用的类..

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

Answer 3

其实课程是这样的：

{property}{sides}-{size}

示例：

mt-1

Answer 4

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

但是例如

class="m-y"

确实有效（在 v4.0.0-alpha 中）

Answer 5

适用于所有断点（从 xs 到 xxl）的间距实用程序中没有断点缩写。这是因为这些类是从 min-width: 0 开始应用的，因此不受媒体查询的约束。但是，其余断点确实包含断点缩写。

对于 xs，类使用格式 {property}{sides}-{size} 命名，对于 sm、md、lg、xl 和 xxl 使用 {property}{sides}-{breakpoint}-{size} 格式命名。

如果财产是以下之一：

m - for classes that set margin
p - for classes that set padding

边是以下之一：

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

尺寸为以下之一：

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

Answer 6

也许您正在使用 inline 元素。 上边距和下边距在内联元素中不起作用。 要使其正常工作，您可以将该内联元素的 display 属性更改为 inline-block。