第四章 BootStrap内置工具 - 《BootStrap4响应式开发实战》

4.1 边框
4.2 Clearfix
4.3 关闭图标
4.4 颜色
4.5 Display 属性
4.6 嵌入功能
4.7 Flex
4.8 浮动（float）
4.9 图像替换
- 警告
4.10 内容溢出
4.11 位置（position）
4.12 屏幕阅读器
4.13 阴影
- 实例
4.14 大小尺寸
4.15 间隔
4.16 文本
4.17 垂直对齐
4.18 可见性

4.1 边框

使用 Border 工具类迅速设计一个元素的 border 和边框 border-radius。可用于图像、按钮、或任何其它元素。

4.1.1 Border

将 border 类添加到一个元素中，以便移除所有 border 或部分 border。

4.1.1.1 增加

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

4.1.1.2 减少

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

4.1.2 边框颜色

使用基于主题颜色构建的工具更改边框颜色。

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

4.1.3 圆角边框

只需要使用这个类就可以让默认的直角边框变成圆角边框。

<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">

4.2 Clearfix

通过添加clearfix工具，可以快速轻松地清除容器中的浮动内容。
通过对父元素增加 .clearfix）（清除浮动）以方便的清除 float （浮动）。也可以做为 Sass mixin 使用。

<div class="clearfix">...</div>

以下示例显示了如何使用clearfix。不使用clearfix，外层div将不会包裹按钮而导致布局损坏。

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>

4.3 关闭图标

使用一般的关闭图标类，关闭 modals 元件和 alerts 元件之类的内容。.
请务必为屏幕阅读器添加文本,我們可以使用 aria-label 标签属性。

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

4.4 颜色

借助一些颜色工具让颜色的表达更具有意义。同时也支持有 hover 状态的链接样式。

4.4.1 Color

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

上下文文本也提供 hover 和 focus 状态，对于链接类型也同时能顺利运行注意 .text-white and .text-muted 类没有链接样式。

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

4.4.2 背景颜色

与上下文文本颜色类相似，可轻易将背景颜色加到元素中。链接元素将会在 hover 上变暗，就像文字类型一样。背景色 不要设置 color 样式，应尽可能使用 .text-* 工具。

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

4.4.3 背景渐变

当 $enable-gradients 设置为true时，你将可以使用 .bg-gradient- 的工具。默认情况下， By default, $enable-gradients 是停用的，下面的例子是故意显示错误的。这是为了在你开始使用 Bootstrap 时更容易进行自定义。
**

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

4.4.3.1 处理例外情况

有时候上下文文本并无法应用在其他的选取器，解决方案是元素的外层补上一个<div>在应用该类。

4.5 Display 属性

Display 工具可快速且包含响应式的切换元件的显示与否，我们的 Display 工具包含许多常用的值，另外在打印时也能使用。

4.5.1 如何运作

使用 display 的工具类来改变 display 属性，我们故意只支持 display 所有可能的一个子集，可以依据需求将这些 Class 调整出各种效果。

4.5.2 符号

Display 工具可以应用在所有中断点，从 xs 到 xl，都在其中，而这些是从最小宽度 min-width: 0; 开始运用，因此预设不受 media query 限制，然而其余的断点都包含缩写。

4.5.3 实例

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

4.5.4 隐藏元素

为了更快地进行移动设备开发，请使用响应式显示类来按设备显示和隐藏元素。避免创建相同站点的完全不同版本，而是相应地为每个屏幕大小隐藏元素
隐藏元素只需使用 .d-none 类或者其中一个 .d-{sm,md,lg,xl}-none 任何响应式屏幕变化的类。
要仅在给定的屏幕尺寸间隔上显示元素，你可以组合一个.d-*-none 类和一个 .d-*-*class，例如 .d-none .d-md-block .d-xl-none 将隐藏所有屏幕尺寸的元素，中型和大型设备除外。

Screen Size	Class
Hidden on all	`.d-none`
Hidden only on xs	`.d-none .d-sm-block`
Hidden only on sm	`.d-sm-none .d-md-block`
Hidden only on md	`.d-md-none .d-lg-block`
Hidden only on lg	`.d-lg-none .d-xl-block`
Hidden only on xl	`.d-xl-none`
Visible on all	`.d-block`
Visible only on xs	`.d-block .d-sm-none`
Visible only on sm	`.d-none .d-sm-block .d-md-none`
Visible only on md	`.d-none .d-md-block .d-lg-none`
Visible only on lg	`.d-none .d-lg-block .d-xl-none`
Visible only on xl	`.d-none .d-xl-block`

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

4.5.5 显示在打印中

可以在打印时通过 display 工具改变 display 的值。一样包含 display 的各种.d-*工具。

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

4.6 嵌入功能

通过创建可在任何设备上缩放的固有比率，根据父级的宽度嵌入响应式视频或幻灯片.

4.6.1 关于

将这些规则直接应用到 <iframe>, <embed>, <video>, and <object> 元素；当需要这些样式对应属性时可加入 .embed-responsive-item。
小技巧 你不需要将 frameborder="0" 加在你的 <iframe>中，因为我们已经为你覆盖了该属性。

4.6.2 实例

在 <iframe> 的父元素使用 .embed-responsive 以加入响应式设计。请注意，<iframe>中的 .embed-responsive-item 并非必须，但我们建议采用它。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

4.6.3 宽高比

可以使用修饰符类自定义宽高比。

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

4.7 Flex

flexbox 工具的套件包管理网格栏的排版、对齐和特定尺寸。对于更复杂的表现则需要自订 CSS。

4.7.1 启用 flex

使用 display 通用类别来创建一个 flexbox 容器，并将直属内元素转换为 flex 属性。增加额外的 flex 属性，也能够进一步修改 flex 容器和属性。

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

.d-flex 和 .d-inline-flex 也存在响应式设计。

4.7.2 方向

透过通用类别来设定 flex 容器与内层 flex 的方向，在大多的情况下你可以忽略水平的 class，因为浏览器预设值是 row. 不过有些特定情境下需要设定这个值(比如在响应式环境下)。
使用 .flex-row 来设定水平的方向(浏览器预设值)，或者使用 .flex-row-reverse 来作水平方向的反转。

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

使用 .flex-column 设置垂直方向，或使用 .flex-column-reverse 作垂直方向的反转。

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

flex-direction 的响应式属性。

4.7.3 调整内容

使用 flexbox 容器上的 justify-content 通用类别改变 flex 物件在主轴上的对齐（x轴开始，如果 flex-direction: column 则为 y 轴）。从 start 浏览器预设）。 end, center, between, 或 around 中选择。

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

justify-content 的响应式属性。

4.7.4 对齐项目

在 flexbox 容器上使用 align-items 工具改变横轴上 flex 物件的对齐（y 轴开始，如果 flex-direction: column 则为 x 轴）。从 start, end, center, baseline, 或 stretch(浏览器预设) 中选择。

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

align-items 包含的响应式属性。

4.7.5 自身对齐

使用 flexbox 物件上的 align-self 通用类别单独改变在横轴上的对齐（y 轴开始，如果 flex-direction: column 则为 x 轴）。与 align-items 相同的选项中选择： align-items: start, end, center, baseline, 或 stretch (浏览器预设)。

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

align-self 的响应式属性。

4.7.6 填满

在相邻元素上使用 .flex-fill 来强制它们在相同的宽度上分配所有可用的水平空间。对于等宽导览特别有用。

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

flex-fill 同样包含响应式的组合。

4.7.7 伸缩值

使用 .flex-grow-* 通用类别来切换项目弹性增长以填充可用空间。在下面的范例中， .flex-grow-1 元素使用它可以使用的所有可用空间，同时允许剩余的两个 flex 物件保留必要的空间。

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

如果需要，使用 .flex-shrink-* 工具来切换调整项目的尺寸。在下面的示例中，第二个带有 .flex-shrink-1 的弹性项目被强制将其内容包装到一个新行，“收缩”以允许更多空间用于上一个具有 .w-100 的弹性项目。

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

flex-grow 和 flex-shrink 也具备响应式设计。

4.7.8 自动的边距

当你将 flex 对齐与 auto margin 混在一起的时候，flexbox 也能正常的运行。下面的范例是透过自动 margin 来控制 flex 物件的三个案例：预设（无 margin），向右推两个项目（.mr-auto），并向左推两个项目（.ml-auto)。
不幸的是，IE10 和 IE11 在父层 justify-content value. 值并没有正确的表现，可以在搜索这个问题来了解更多细节。

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

4.7.8.1 搭配 align-items

混合以下属性 align-items, flex-direction: column, 和 margin-top: auto 或 margin-bottom: auto，会将一个 flex 物件移动到容器的顶部或底部。

<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

4.7.9 Wrap (Flex 的 Wrap 属性)

改变 flex 物件在 flex 容器中的 Wrap。可设置 .flex-nowrap, .flex-wrap, .flex-wrap-reverse 这些属性。

<div class="d-flex flex-nowrap">
  ...
</div>

<div class="d-flex flex-wrap">
  ...
</div>

<div class="d-flex flex-wrap-reverse">
  ...
</div>

flex-wrap 也包含响应式属性。

4.7.10 排序

使用 order 通用类别改变特定 flex 物件的显示排序。我们仅提供将一个物件排在第一个或最后一个，以及重置使用 DOM 次序。由于 order 只能使用整数值（例如，5），对需要的任何额外值需要自定义 CSS。

<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

order 也包含响应式设计。

4.7.11 对齐内容

使用 flexbox 容器上的 align-content 工具将 flex 物件于横轴上一起对齐。从 start 浏览器预设), end, center, between, around, or stretch 中选择。为了呈现这通用类别的效果，我们加入了 flex-wrap: wrap 及增加了flex项的数量。
注意！此特性对于单行的 flex 无作用。

<div class="d-flex align-content-start flex-wrap">
  ...
</div>

<div class="d-flex align-content-end flex-wrap">...</div>

<div class="d-flex align-content-center flex-wrap">...</div>

<div class="d-flex align-content-between flex-wrap">...</div>

<div class="d-flex align-content-around flex-wrap">...</div>

<div class="d-flex align-content-stretch flex-wrap">...</div>

align-content 也包含响应式设计。

4.8 浮动（float）

使用我们的响应式浮动工具，可以在任何断点上切换浮动任何元素。

4.8.1 概览

这些工具向左或向右浮动元素，可以根据当前 viewport 大小禁用浮动 CSS float 。增加属性 !important 可以以避免例外情况。它们使用与我们的网格系统相同的 viewport 断点。请注意，浮动工具对 flex 没有影响。

4.8.2 类

用类切换浮动属性:

<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

4.8.3 响应

每种情况也存在反应性变化float 值。

4.9 图像替换

使用图像替换类交换背景图像的文本。

警告

text-hide() 自v4.1起，class和mixin已被弃用。它将在v5中完全删除。
利用.text-hideclass或mixin以帮助用背景图像替换元素的文本内容。

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  @include text-hide;
}

使用 .text-hide 类来保持标题标签的可访问性和SEO优势，但是想要利用 background-image 而不是文字。

<h1 class="text-hide" style="background-image: url('http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>

4.10 内容溢出

使用本工具来处理内容溢出
overflow 工具提供了两个值用于处理内容溢出，这不是基于响应式设计的。

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

4.11 位置（position）

使用这些工具快速配置元素的位置。

4.11.1 通用属性

快速增加定位的类不包含响应式设计。

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

4.11.2 固定在顶部

将一个元素置于可视区的顶部，从边到边。必要时你需要增加额外的 CSS。

<div class="fixed-top">...</div>

4.11.3 固定在底部

一个元素置于可视区的底部，从边到边。必要时你需要增加额外的 CSS。

<div class="fixed-bottom">...</div>

4.11.4 粘性置顶

使用 .sticky-top 类可以让一个元素粘性置顶，它采用了 position: sticky 属性，不过这一属性目前不是所有浏览器都支持。
IE11 和 IE10 会把 position: sticky 作为 position: relative 。 因此，我们将样式包装在 @supports 查询中，将 position: sticky 制为只能正确呈现它的浏览器。

<div class="sticky-top">...</div>

4.12 屏幕阅读器

使用screenreader工具隐藏除屏幕阅读器之外的所有设备上的元素。
透过 .sr-only将一个元素对所有设备隐藏，除了屏幕阅读器，只有屏幕阅读器可以读取到 .sr-only 中的内容。将 .sr-only 于 .sr-only with .sr-only-focusable 结合，以便在其被 focused 时再次显示该元素（例如通过键盘使用）。也可以用作 Sass mixins。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}

4.13 阴影

使用 box-shadow 工具为元素添加或删除阴影。

实例

虽然在 Bootstrap 中默认禁用组件上的阴影，但可以通过启用 $enable-shadows，你也可以用我们的快速添加或删除阴影 box-shadow 工具类。包括支持 .shadow-none 等三种不同预设的阴影效果(可通过变量调整)。

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

4.14 大小尺寸

使用我们的宽度和高度工具轻松地将元素设置为宽或高（相对于其父元素）。
宽度和高度工具可以从 $sizes 中 _variables.scss 的 Sass map 产生。预设包含 25%, 50%, 75%, 100%, 和 auto 做为预设。按你的需求调整这些值，可产生不同的属性

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

你也可以使用 max-width: 100%; and max-height: 100%; 这些工具。

<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>

4.15 间隔

Bootstrap 包括各种简写响应式 margin、padding 的通用类别，可用来修改一个元素的外观。

4.15.1 如何运作

赋予一个缩写 class 使 margin 或 padding 值在一个元素上或其中一个边缘上 (包含响应式)。包含支援单一个边缘属性或全部边缘、垂直边缘、水平边缘上。 Class 来自于 Sass map，范围从 .25rem 到 3rem.

4.15.2 符号

适用于所有断点的间距工具 xs 到 xl,它们没有断点缩写。这是因为应用了这些类 min-width: 0 并且因此不受媒体查询的约束。但是，其余断点确实包含断点缩写。
对于 xs，使用固定格式{property}{sides}-{size} 命名这些 Class，对于 sm, md, lg, 和xl。使用格式{property}{sides}-{breakpoint}-{size}
属性设定:

m 这个 class 会设定 margin
p 这个 class 会设定 padding
边缘设定:
t 这个 class 会设定 margin-top 或 padding-top
b 这个 class 会设定 margin-bottom 或 padding-bottom
l 这个 class 会设定 margin-left 或 padding-left
r 这个 class 会设定 margin-right 或 padding-right
x 这个 class 会设定 both *-left 和*-right
y 这个 class 会设定 both *-top 和*-bottom
空白 - 如果边缘 class 未加入则会设定 margin或 padding 在元素的四个边缘。
尺寸设定：
0 - 这个 class 会设定 margin 或 padding 样式值为 0
1 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer * .25
2 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer * .5
3 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer
4 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer * 1.5
5 - (预设时) 这个 class 会设定 margin 或 padding 于 $spacer * 3
auto 这个 class 会设定 the margin to auto
（你也可以对 $spacers Sass 图形变量。）

4.15.3 实例

以下是这些 class 的一些代表性范例：

.mt-0 {
  margin-top: 0 !important;
}
.ml-1 {
  margin-left: ($spacer * .25) !important;
}
.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}
.p-3 {
  padding: $spacer !important;
}

4.15.3.1 水平居中

此外，Bootstrap 也包括一个 .mx-auto，用于固定宽度盒模型的水平置中，是具有 display: block 和 width 集合的内容，并将水平 margin 设置为 auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

4.16 文本

一般文字工具来控制对齐、围绕、字体粗细、和其它属性的文档范例。

4.16.1 文字对齐

使用文本对齐类轻松地将文本与组件对齐。

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

对于左对齐，右对齐和中心对齐，可以使用与网格系统相同的 viewport 宽度断点的响应类。

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

4.16.2 换行和内容溢出处理

使用 .text-nowrap 可以让文本不换行。

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

对于更长的内容，你可以增加一个 .text-truncate ，可以截掉多余内容 。行内元素需要额外使用 display: inline-block or display: block 来确保正常的显示效果。

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

4.16.3 文字变换

使用 Class 将元件中的文字内容转大写。

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

注意 text-capitalize 仅改变每一个词的第一个字母，而其它字母的大小写不受影响

4.16.4 字体粗细和斜体

改变文字内容的粗细或斜体。

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>

4.16.5 等宽字体

使用 .text-monospace 可将字体改为等宽字体。

<p class="text-monospace">This is in monospace</p>

4.17 垂直对齐

改变 inline、inline-block、inline-table、和 table 元素的垂直对齐。
使用 vertical-alignment 通用类别改变元素的对齐。请注意，垂直对齐仅影响 inline、inline-block、inline-table、和 table 元素。
依需求从 .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top 中选择。
搭配 inline 元素：

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

搭配 table cell 元素：

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

4.18 可见性

通过可见性工具控制可见性，不会影响物件的实际空间。
使用可见性通用类别设置元素的 visibility。这不会改变 display 值，并且有助于对大部分使用者隐藏内容，但是在屏幕阅读器仍然保存它们。
依需求使用 .visible 或 .invisible 。

<div class="visible">...</div>
<div class="invisible">...</div>