如何使用带有 Bootstrap 4 的卡片将水平布局定义为列表

Question

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

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

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

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

不过现在Bootstrap4个面板都变成卡了，dl-horizontalclass好像没有效果

<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

Bootstrap4不再支持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>

对我有用

Answer 2

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

<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 class 仅适用于 sm+ 屏幕，并且 <dt> 向右对齐。

Answer 3

使用 list-inline 和 list-inline-item 的组合：

<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>

如何使用带有 Bootstrap 4 的卡片将水平布局定义为列表

How to get horizontal layout to definition lists with cards with Bootstrap 4

css

twitter-bootstrap

twitter-bootstrap-4