如何将dl内容左对齐？

Question

我在使用Bootstrap的dl-horizontal类时遇到了问题。在xs、md和lg视口中，dl的描述被正确显示。但是，在sm视口中，dl的内容超出了其父元素的边界。

以下是xs视口的示例。

然后是更大的...

问题出现在 md 视口。

这是与那个 div 相关的代码：

    <div class="col-sm-3">
          <div class="panel panel-primary">
                <div class="panel-heading text-center">
                    Stats
                </div>
                <div class="panel-body">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#">Basic</a></li>
                        <li><a href="#">Advanced</a></li>
                    </ul>
                    <dl class="dl-horizontal text-muted">
                        <dt>
                            Nodes:
                        </dt>
                        <dd>
                            7
                        </dd>
                        <dt>
                            Bandwidth:
                        </dt>
                        <dd>
                            3 kbps
                        </dd>
                        <dt>
                            Average hops:
                        </dt>
                        <dd>
                            3
                        </dd>
                        <dt>
                            Latency:
                        </dt>
                        <dd>
                            100 ms
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

- Pepedou

Answer 1

您可以添加此属性以擦除 dt 元素中的 text-align: center 属性：

.dl-horizontal dt { text-align: left; }

See it here

- Vincent G

Answer 2

您需要添加 dt 元素的样式 width: auto;。

- Grey13

---

仅仅改变 dt 的宽度是不够的，因为 dd 元素设置了 margin-left。 - ᴍᴇʜᴏᴠ

Answer 3

创建一个自定义样式，用于重置dt和dd的默认样式行为，就像其他人建议的那样。

.dl-horizontal > dt.left {
    text-align: left;
    margin-right: 10px;
    width: auto;
}

.dl-horizontal > dd.left {
    margin-left:0;
}

- Rogério Nóbrega