如何对齐左dl内容？

Question

使用带有dl类的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>

Answer 1

您可以添加此属性以删除dt：{/ p>的text-align: center属性

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

See it here

Answer 2

您需要添加e元素的样式dt