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

Question

dl list view在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

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

从Bootstrap 4的迁移文档

.dl-horizontal已被丢弃.相反,使用.row上<dl>和其使用网格列类(或混入)<dt>和<dd>子女.

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>

Answer 3

如果您已嵌入.dl-horizontal内容，则始终可以将 Bootstrap 3 代码重新添加到您自己的.css样式表中。从Bootstrap 3 来源：

@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;
}