如何对齐左 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

您可以添加此属性来删除text-align: centerdt 的属性：

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

在这里查看