dl（详细列表）在 bootstrap 4 中不起作用

Question

dl 列表视图在 bootstrap 4 中不起作用，与在 bootstrap 3 中一样

HTML:

  <section class="landing">
      <div class="container">
        <dl class="dl-horizontal">
          <dt>col1</dt>
          <dd>col2</dd>
        </dl>
      </div>
    </section>

原文由 cdTest 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

该类已从 V4 中的 Bootstrap 中删除。

来自 Bootstrap 4 的 Migration 文档

.dl-horizontal 已被删除。 Instead, use .row on <dl> and use grid column classes (or mixins) on its <dt> and <dd> children.

原文由 Paulie_D 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我遇到了同样的问题，并使用 .row 类解决了它，正如@Paulie_D 所建议的

这是我所做的

 <section class="landing">
  <div class="container">
    <dl class="row">
      <dt class="col-sm-3">col1</dt>
      <dd class="col-sm-9">col2</dd>
    </dl>
  </div>
</section>

更新 您还可以添加文本左右对齐

 <section class="landing">
  <div class="container">
    <dl class="row">
      <dt class="col-sm-3 text-right">col1</dt>
      <dd class="col-sm-9 text-left">col2</dd>
    </dl>
  </div>
</section>

原文由 Bellash 发布，翻译遵循 CC BY-SA 4.0 许可协议