在Bootstrap中强制水平描述列表

Question

我正在使用Twitter Bootstrap v3.2.0来布局我的页面。我有以下描述列表，它在所有响应视图中显示正常，除了额外的小视图。如何在该视图中强制显示水平显示？

<dl class="dl-horizontal">
    <dt>Stack:</dt>
    <dd>461mm</dd>
    <dt>Reach:</dt>
    <dd>389mm</dd>
</dl>

正确布局（在XS以外的所有视图中）

布局不正确（在xs视图中）

Answer 1

现在在你的代码中使用它：

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}

并将其置于媒体查询之外：

 .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }