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>

Answer 1

class 已从 V4 中的 Bootstrap 中删除。

来自Migration documents of Bootstrap 4

.dl-horizontal has been dropped. Instead, use .row on <dl> and use grid column classes (or mixins) on its <dt> and <dd> children.

Answer 2

我遇到了完全相同的问题，并按照@Paulie_D

的建议使用.row class解决了它

这是我做的

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

Answer 3

如果您在内容中嵌入了 .dl-horizontal，您可以随时将 Bootstrap 3 代码添加回您自己的 .css 样式表中。来自 Bootstrap 3 source:

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}

...

.dl-horizontal dd:before,
.dl-horizontal dd:after, {
  display: table;
  content: " ";
}

...

.dl-horizontal dd:after {
  clear: both;
}

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

dl(detail list) not working in bootstrap 4

html

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4