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>
そのクラスはV4のBootstrapから削除されました。
.dl-horizontal
は削除されました。代わりに、.row
で<dl>
を使用し、その<dt>
および<dd>
子でグリッド列クラス(またはミックスイン)を使用します。
私はまったく同じ問題を抱えており、.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>
埋め込み済みの場合.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;
}