Css 如何使用带引导4的卡将水平布局设置为定义列表

我一直在使用Bootstrap3构建一个web应用程序。其中，我使用面板对用户元素进行分组——显示数据、简单编辑表单等

我将使用一个

dl

，标签为

dt

，值为

dd

。 类似地，我将使用标签与字段内联的表单

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

更新

---

删除对表单的引用。我最初在

水平表单方面也遇到了问题，Bootstrap4对水平表单的处理方式有所不同
Bootstrap4不再支持
dl水平表单
。建议使用
.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>


名称
价值

为我工作
要获得完全响应的行为，请使用：

<div class="card-body">
  <div class="card-text">
    <dl class="row">
      <dt class="col-sm-3 text-md-right">Name</dt>
      <dd class="col-sm-9">Value</dd>
    </dl>
  </div>
</div>


名称
价值

因为在Bootstrap 3中，
dl horizontal
类仅应用于sm+屏幕，并且它将
向右对齐。
使用列表内联和列表内联项的组合：

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


名称
价值
一些代码会很好……我想你应该知道，与你的代表一起。你可以看到有关
dl水平
的Bootstrap 3到4的迁移说明。.dl horizontal已被删除。请改为在其和子级上使用.row，并使用网格列类（或mixin）
<div class="card-body">
  <div class="card-text">
    <dl class="list-inline">
      <dt class="list-inline-item">Name</dt>
      <dd class="list-inline-item">Value</dd>
    </dl>
  </div>
</div>