全长行( dl )

Question

我使用的是引导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

尝尝这个

检查演示这里

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

这个小提琴链接可以解决你的问题。

密码如下。

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文件。