使用 Twitter Bootstrap 添加垂直空白? [英] Add vertical whitespace using Twitter Bootstrap?

问题描述

使用 Twitter 的 Bootstrap 添加垂直空白的最佳方法是什么?

What's the best way to add vertical whitespace using Twitter's Bootstrap?

例如，假设我正在创建一个登录页面，并希望在某个按钮的上方和下方留出一点 (100 像素) 的空白.显然，我可以为那个特定的按钮创建一个特定的类.但是，我认为 Bootstrap 应该有一种 DRY 方式来添加垂直空格.

For example, let's say that I am creating a landing page and would like a bit (100px) of blank whitespace above and below a certain button. Obviously, I could create a certain class for that particular button. But, I would think that Bootstrap should have a DRY way of adding in vertical blank spaces.

推荐答案

在 Bootstrap 4/5 中有间距实用程序 (BS4、BS5).

In Bootstrap 4/5 there are spacing utilites (BS4, BS5).

文档摘录:

适用于所有断点的间距实用程序，从 xs 到 xl，其中没有断点缩写.这是因为那些类从 min-width: 0 开始应用，因此不受媒体查询.然而，其余的断点确实包括一个断点缩写.

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

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

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

其中财产是以下之一:

• m - 用于设置 margin
的类
• p - 用于设置 padding
的类

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

sides 是其中之一(请注意 BS4 和 BS5 的差异):

• t - 对于设置 margin-top 或 padding-top
的类
• b - 对于设置 margin-bottom 或 padding-bottom
的类
• l - 用于设置 margin-left 或 padding-left (Bootstrap 4)
• s - 用于设置 margin-left 或 padding-left (Bootstrap 5)
• r - 用于设置 margin-right 或 padding-right (Bootstrap 4)
• e - 用于设置 margin-right 或 padding-right (Bootstrap 5)
• x - 对于同时设置 *-left 和 *-right
的类
• y - 对于同时设置 *-top 和 *-bottom
的类
• blank - 用于在元素的所有 4 个边上设置 margin 或 padding 的类

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left (Bootstrap 4)
• s - for classes that set margin-left or padding-left (Bootstrap 5)
• r - for classes that set margin-right or padding-right (Bootstrap 4)
• e - for classes that set margin-right or padding-right (Bootstrap 5)
• 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

其中 size 是以下之一:

• 0 - 对于通过将其设置为 0
来消除边距或填充的类
• 1 -(默认情况下)用于将 margin 或 padding 设置为 $spacer * .25 的类>
• 2 -(默认情况下)用于将 margin 或 padding 设置为 $spacer * .5 的类>
• 3 -(默认情况下)用于将 margin 或 padding 设置为 $spacer
• 4 -(默认情况下)用于将 margin 或 padding 设置为 $spacer * 1.5 的类
• 5 -(默认情况下)用于将 margin 或 padding 设置为 $spacer * 3 的类

• 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

---

因此，要在元素上方和下方留出一些额外的垂直空间，您可以使用 my-5 类.

这篇关于使用 Twitter Bootstrap 添加垂直空白?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！