我有一个使用Bootstrap v3.0的网站.在其中一个视图中,我需要显示6对键值项,我使用的是dl-horizontal元素.我的这个列表的问题是我的键有不同的长度,所以当我有一个长键时,文本被截断.将文本分成两行或更多行会很好.这可能吗?有没有更好的元素来做到这一点?
当文字太短时我也有问题.在这种情况下,左边有很多空间.这是一个例子:
编辑:添加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