Question

对于以下标记：

<dl class="dl-horizontal">
    <dt>A few words describing the term</dt>
    <dd>The data associated with the term</dd>
</dl>

dt term元素是固定宽度（180px），由于CSS的特殊性，无法使用col-进行更改。例如，以下内容不起作用：

<dl class="dl-horizontal">
    <dt class="col-sm-3">A few words describing the term</dt>
    <dd class="col-sm-9">The data associated with the term</dd>
</dl>

描述列表用于名称 - 值对，固定宽度不适用于单个词长度超过180px的某些语言。截断是不可能的（它截断了有价值的含义）和自动换行（使用Stack Overflow覆盖）是不可读的。

我是否需要添加额外的课程，还是应该追加Twitter Bootstrap？

修改

由于缺乏答案，我在bootstrap中遇到了一个问题： https://github.com/twbs/bootstrap/issues/14983

Answer 1

...你总是可以为col-sm-3和col-sm-9类编写覆盖代码（按照确切的例子），但我想使用媒体查询编写你自己的类会更容易您在引导程序文件中使用的相同断点。您还可以使用此自定义类来设置新的最小宽度。

@media (min-width:XXX) and (max-width:XXX) {
  dt.col-sm-3 {
    width:25%;
  }
  dt.col-sm-9 {
    width:75%;
  }
}

在Bootstrap 3中，是否可以在带有水平定义列表的定义术语上使用col - * - *类？

修改

1 个答案: