html - dl(详细列表)在 bootstrap 4 中不起作用

Question

dl ListView 在 bootstrap 4 中的工作方式与在 bootstrap 3 中的相同

HTML:

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

Answer 1

我遇到了完全相同的问题，并按照@Paulie_D 的建议使用 .row 类解决了它

这是我做的

 <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>