css - 如何对齐左 dl 内容？

Question

我在将 Bootstrap 的 dl 与 dl-horizo​​ntal 类一起使用时遇到问题。在 xs、md 和 lg 视口(viewport)中，dl 的描述正确显示。但是，在 sm 视口(viewport)中，dl 的内容离开了其父级的边界。

这是 xs 视口(viewport)。

然后是更大的...

md 视口(viewport)出现问题。

这是与 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 的 text-align: center 属性:

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

See it here