twitter-bootstrap - Bootstrap dl-horizo​​ntal 元素中的文本被截断

Question

我有一个使用 Bootstrap v3.0 的网站。在其中一个 View 中，我需要显示 6 对键值项，我使用的是 dl-horizontal element .我对这个列表的问题是我的键有不同的长度，所以当我有一个长键时，文本被截断。将文本分成两行或多行会很好。这可能吗？有没有更好的元素来做到这一点？

当文本太短时，我也有问题。在这种情况下，我左边有很多空间。这是一个例子:

Answer 1

编辑:添加white-space: normal在 dt

您的问题可能来自您的容器。

您可以使用 .panel具有固定宽度的类以使其工作。
考虑以下:

<div class="panel panel-danger">

  <div class="panel-heading">Baseline <span class="pull-right">ERROR</span></div>

  <div class="panel-body">

    <dl class="dl-horizontal">
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dt>Euismod</dt>
      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
      <dt>Malesuada porta</dt>
      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
      <dt>Felis euismod semper eget lacinia</dt>
      <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
    </dl>

    <div class="btn-toolbar text-center" role="toolbar">
      <button type="button" class="btn btn-primary">Expandable</button>
      <button type="button" class="btn btn-primary">ERROR <span class="caret"></span></button>
      <button type="button" class="btn btn-danger">Delete</button>
    </div>

  </div>
</div>

.panel {
    width: 500px;  
}
.panel .dl-horizontal dt {
    white-space: normal;
}

Bootply