全长行在dl

Question

我正在使用Bootstrap 3.3.7并且我将dl列表配置为水平。我想在<dl>标记内可视化一个完整长度的行。

<dl class="dl-horizontal">
  <dt>Label 1</dt>
  <dd>Text 1</dd>
  <dt>how to display a full length text?</dt>
  <dd></dd>
  <dt>Label 2</dt>
  <dd>Text 2</dd>
</dl>

我想获得这样的东西：

Answer 1

试试这个

检查演示here

HTML：

<dl class="dl-horizontal">
 <dt>Label 1</dt>
 <dd>Text 1</dd>
 <dt class="fullWidth"> 26 Lakeshore View, Sentosa Cove, Singapore 26 Lakeshore View, Sentosa Cove.</dt>
 <dd></dd>
 <dt>Label 2</dt>
 <dd>Text 2</dd>
</dl>

CSS：

.fullWidth + dd {
    margin-left: 0;
    width: unset;
}
.dl-horizontal dt.fullWidth {
    width: 100%;
    text-overflow: unset;
    white-space: initial;
    text-align: left;
}

Answer 2

这个小提琴link可能会解决您的问题。

代码如下。

HTML

<div class="container">
  <dl class="dl-horizontal">
    <div class="row">
      <dt class="col-xs-6">Label 1</dt>
      <dd class="col-xs-6">Text 1</dd>
    </div>
    <div class="row">
      <dd class="col-md-12">I guess this is what you are looking. This may help you. in bootstrap each row is devided into 12 columns. For more information you can check bootstrap grid system.  </dd>
    </div>

    <div class="row">
      <dt class="col-xs-6">Label 2</dt>
      <dd class="col-xs-6">Text 2</dd>
    </div>
    <div class="row">
      <dd class="col-md-12">Defination of lable2 Text2. This contains the defination.</dd>
</div>
  </dl>
</div>

您需要添加bootstrap.js和bootstrap.css个文件。