如何使用Bootstrap 4使用卡获得水平布局到定义列表

Question

我一直在使用Bootstrap 3构建Web应用程序。在那期间，我使用面板对用户元素进行了分组-显示数据，简单的编辑表单等。

我将使用带有a dl的标签和作为a dt的值dd。同样，我将使用带有与字段内联的标签的表单

<div class="panel-body">
  <dl class="dl-horizontal">
    <dt>Name</dt>
    <dd>Value</dd>
  </dl>
</div>

我可以dl-horizontal在面板中使用就好了。

但是，现在，随着Bootstrap 4面板的普及，dl-horizontal该类似乎没有效果。

<div class="card-body">
  <div class="card-text">
    <dl class="dl-horizontal">
      <dt>Name</dt>
      <dd>Value</dd>
    </dl>
  </div>
</div>

更新 删除对表单的引用。我最初也有问题form-horizontal，Bootstrap4处理水平形式的方式有所不同

Answer 1

Bootstrap 4不再支持dl-horizontal。推荐的替代方法是使用.row和.col*。

<div class="card-body">
  <div class="card-text">
    <dl class="row">
      <dt class="col-4">Name</dt>
      <dd class="col-8">Value</dd>
    </dl>
  </div>
</div>

为我工作