Bootstrap-4 中的 blockquote-reverse答案

【问题标题】：blockquote-reverse in Bootstrap-4Bootstrap-4 中的 blockquote-reverse
【发布时间】：2019-09-05 12:31:48
【问题描述】：

Bootstrap-4 中 Bootstrap-3 的 blockquote-reverse 类的替换是什么。我用谷歌搜索了它，但找不到解决方案。

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

Bootstrap 4.x 删除了这样的类名，以支持它们的新实用程序类。这在他们的migration documentation 搜索blockquote-reverse 时注明

重新设计的块引用，将其样式从 <blockquote> 元素到单个类，.blockquote。放弃了 .blockquote-reverse 文本实用程序的修饰符。

新的文本实用程序类对内容的组织方式提供了更精细的控制 - 但为了复制.blockquote-reverse，您只需应用text-right。

Bootstrap 4.x Text Utility Class Documentation

【讨论】：

【解决方案2】：

在第 4 版中，他们将 blockquote-reverse 替换为 blockquote text-right

试试这个代码示例，

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

【讨论】：

【解决方案3】：

您必须使用 class="pull-right" 将包括关联线在内的所有内容拉到右侧。 class="text-right" 只对齐文本，而不是与块引用关联的灰线。

【讨论】：