html - 如何对齐左dl内容？

将Bootstrap的dl与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>

最佳答案

您可以添加此属性以清除dt的text-align: center属性：

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

See it here

关于html - 如何对齐左dl内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36704619/