dl（详细列表）在引导程序 4 中不起作用

Posted 2023-03-05

【中文标题】dl（详细列表）在引导程序 4 中不起作用

【英文标题】：dl(detail list) not working in bootstrap 4

【发布时间】：2017-01-03 02:16:54

【问题描述】：

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>

【参考方案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>

【讨论】：

.dl-horizontal 文本内联时不右对齐，阻塞时不左对齐？

如果我们有多个 dt-dd 对，如何将它们分别放在自己的行上？

【参考方案2】：

如果您在内容中嵌入了 .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;

【参考方案3】：

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

来自Migration documents of Bootstrap 4

.dl-horizontal 已被删除。相反，在<dl> 上使用.row，并在其<dt> 和<dd> 子级上使用网格列类（或mixins）。

【讨论】：

谢谢 Paulie_D.. :)