Question

我有一个这样的描述清单：

<h2 class="page-title">Details</h2>

<div class="well details-form">
    <dl class="dl-horizontal text-center">
        <dt>
          Test 1:
        </dt>

        <dd>
            Test 1
        </dd>

        <dt class="margin-space">
            Test 2:
        </dt>

        <dd class="margin-space">
            Test 2
        </dd>

        <dt class="margin-space">
            Test 3:
        </dt>

        <dd class="margin-space">
            Test 3
        </dd>
  </dl>
</div>

text-center类是引导程序库的一部分，它似乎只是dd元素的中心，而不是dt元素的中心。

这是一个Bootply来展示我的问题。

如何将dt元素置于h2元素下方（不是直接位于下方，而是略微左侧），以便h2元素位于dt和dd元素）？

感谢任何帮助。

更新

图片来自mhatch提供的答案：

结果仍然如下：Bootply。只是居中dt元素..但它们不会在详细信息h2元素下移动。

我在寻找什么

                                          Details

                                    Test 1:     Test 1
                                    Test 2:     Test 2
                                    Test 3:     Test 3

Answer 1

如果您不需要使用定义列表<input class="form-control" id="sel1" type="text" placeholder="" value="<?php echo $row->firstname; ?>">的语义，我建议您将其更改为正常的引导列。否则，我们需要做很多工作来覆盖默认的引导属性，使<dl>和<dd>居中。

<dt>

https://jsfiddle.net/tomsarduy/0z67j2pw/

Answer 2

在引导程序样式中，以下CSS规则将<dt>设置为右对齐：

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

只需添加CSS规则即可覆盖它。之后引导程序样式包含此CSS规则：

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

Answer 3

我建议缩小dl列。现在dl是井容器的整个宽度，这太宽了，无法获得所需的布局。

您可以使用Bootstrap网格系统将其限制为容器的三分之一。请参阅此Bootply。

然后，您可以根据需要更多地设置dt和dd元素的样式。

dl中的中心dt元素

3 个答案: