如何在Bootstrap 4的卡片中实现定义列表的水平布局

嘿，我当初从Bootstrap 3切换到4的时候也碰到过这个问题！Bootstrap 4已经移除了dl-horizontal这个类，而且卡片（Card）组件的布局逻辑和旧版面板（Panel）也有差异，直接沿用原来的写法肯定行不通。不过别担心，用Bootstrap 4的网格系统就能轻松实现同样的效果，甚至更灵活。

核心思路 #

Bootstrap 4官方推荐用**网格布局（Grid）**替代原有的dl-horizontal，通过给<dt>和<dd>添加列（Col）类来控制宽度，从而实现水平排列。这种方式既符合Bootstrap 4的设计规范，也能和卡片组件完美兼容。

代码示例 #

把你原来的代码改成下面这样，就能在卡片里实现水平定义列表了：

<div class="card">
  <div class="card-body">
    <dl class="row">
      <dt class="col-sm-3">Name</dt>
      <dd class="col-sm-9">Value</dd>
      
      <dt class="col-sm-3">Email</dt>
      <dd class="col-sm-9">user@example.com</dd>
      
      <dt class="col-sm-3">Phone</dt>
      <dd class="col-sm-9">123-456-7890</dd>
    </dl>
  </div>
</div>

细节优化说明 #

• 给<dl>添加row类，将其转为网格容器；
• 给<dt>设置合适的列宽（比如col-sm-3），<dd>占用剩余宽度（比如col-sm-9），在小屏幕（sm以下）会自动堆叠，保持响应式效果，和原dl-horizontal行为一致；
• 如果想更贴近Bootstrap 3里dl-horizontal的样式，可以给<dt>加font-weight-bold类，让标签更突出：

  <dt class="col-sm-3 font-weight-bold">Name</dt>
  

为什么原方法失效？ #

Bootstrap 4重构了不少组件，dl-horizontal就是被移除的组件之一，官方明确推荐用网格系统实现类似布局。另外，卡片的card-body本身是块级容器，直接用网格类就能完美适配，不需要额外的特殊类。

内容的提问来源于stack exchange，提问作者Vihung