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

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

我将使用dl,标签为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的水平形式有所不同

最佳答案

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>


为我工作