Question

我有一个带有col-sm-12类的div，在其中，我有以下几点：

<dl class="dl-horizontal">
    <dt>Price:</dt> <dd>${{ number_format($listing->CurrentPrice,0) }}</dd>
    <dt>Status:</dt> <dd>{{ $listing->Status }}</dd>
    <dt>MLS Number:</dt> <dd>{{ $listing->MLSNumber }}</dd>
</dl>

我喜欢它在大屏幕上的外观，但在小屏幕上，例如iPhone的宽度为640px，即使有足够的空间，<dd>标签也会突破另一条线。

在大屏幕上，该部分如下所示：

当我以640px宽的速度进入iPhone屏幕时，它看起来像这样：

当我达到非常小的分辨率时，如何将<dt>和<dd>保持在Bootstrap 3的同一行？

Answer 1

正如我评论的那样，最简单的是min-width上的dl，但您需要知道dt和dd可以在一起的最大宽度，让我们说250px，并使用dl设置min-width: 250px;规则将使其不会中断。

更好的方法是使用花车。

如果您不想换行，只需将white-space: nowrap;添加到.dl-horizontal dd规则。

＆＃13;

.dl-horizontal dt, .dl-horizontal dd  {  
  float: left;
  margin: 0;
}
.dl-horizontal dt {
  text-align: right;
  font-weight: bold;
  width: 100px;
  margin-right: 10px;
  white-space: nowrap;  
}
.dl-horizontal dd {
  width: calc(100% - 110px);
}

＆＃13;

<dl class="dl-horizontal">
    <dt>Price:</dt> <dd>sjdsdjfhksjhfksjdh fkjsdh fkjsdh fkjsdh fkjsdhfkjs kfjhsdkf sdf jksdf ksdjhfks fdfsdf</dd>
    <dt>Status:</dt> <dd>{{ $listing->Status }}</dd>
    <dt>MLS Number:</dt> <dd>{{ $listing->MLSNumber }}</dd>
</dl>

＆＃13;

Answer 2

如果您在调整窗口大小时仔细检查浏览器中的行为，您会注意到以下样式应用于宽度超过768px的屏幕。

@media (min-width: 768px) {
    .dl-horizontal dd {
        margin-left: 180px;
    }

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

因此，要在小屏幕上获得该行为，您需要做的就是将这些样式规则添加到自定义样式表中，但在媒体查询之外，无论屏幕大小如何，它们都会被应用。

http://www.bootply.com/htGYTQPo1N

Answer 3

对您的元素使用white-space: nowrap;。

Answer 4

我建议使用di包装器和CSS表。

di是为XHTML 2提出的新元素，可用于对dt和dd元素进行分组。

它在HTML5中不存在，但谁在乎？

dl {
  display: table;
  border-spacing: 1em .2em;
}
di {
  display: table-row;
}
dt, dd {
  display: table-cell;
}
dt {
  font-weight: bold;
  text-align: right;
}

<dl class="dl-horizontal">
  <di>
    <dt>Price:</dt>
    <dd>${{ number_format($listing->CurrentPrice,0) }}</dd>
  </di>
  <di>
    <dt>Status:</dt>
    <dd>{{ $listing->Status }}</dd>
  </di>
  <di>
    <dt>MLS Number:</dt>
    <dd>{{ $listing->MLSNumber }}</dd>
  </di>
</dl>

如何防止我的<dl>以非常低的分辨率进行包装？

4 个答案: