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。

然而，现在，使用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>

为我工作

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类仅适用于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卡进行定义列表的水平布局

3 个答案: