web-dev-qa-db-ja.com

dl（詳細リスト）がbootstrap 4で機能しない

bootstrap 4でbootstrap 3と同じようにdlリストビューが機能しない

HTML：

 <section class="landing">
      <div class="container">
        <dl class="dl-horizontal">
          <dt>col1</dt>
          <dd>col2</dd>
        </dl>
      </div>
    </section>
htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4
14
cdTest

そのクラスはV4のBootstrapから削除されました。

Bootstrap 4）の移行ドキュメントから

.dl-horizontalは削除されました。代わりに、.rowで<dl>を使用し、その<dt>および<dd>子でグリッド列クラス（またはミックスイン）を使用します。

13
Paulie_D

私はまったく同じ問題を抱えており、.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>
13
Bellash

埋め込み済みの場合.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;
}
5
sighmon