如何在Bootstrap 4中布局标签和值？

Question

我正在寻找一种在整个应用程序中布局标签和数据的方法。我想要一个适用于以下示例的解决方案，也适用于其他数据。

我想布置标签和值，以便它们以网格格式左对齐。我不想使用Bootstrap 4 col-md-N类，因为我不想硬编码列大小。相反，我希望标签和数据宽度定义列的宽度。在添加可能具有较长文本的新标签时，我不需要总是更改列大小。我还希望能够轻松地使列左或右对齐。

同样，Bootstraps <dl>样式似乎不正确。

现在，这是通过表格完成的。

另外，要明确一点，这不是一种表单，因此Bootstrap表单元素似乎也不是正确的选项。（没有可发布的内容）。

到目前为止，这是我的代码：

    <table>
        <tbody>
            <tr>
                <td class="text-right"><label class="mr-2">Short:</label></td>
                <td>Short data</td>
            </tr>
            <tr>
                <td class="text-right"><label class="mr-2">A very long label:</label></td>
                <td>1/2/2018</td>
            </tr>
            <tr>
                <td class="text-right"><label class="mr-2">An even longer label:</label></td>
                <td>and longer data...</td>
            </tr>
        </tbody>
    </table>
    <hr />
    <table>
        <tbody>
            <tr>
                <td><label>Price:</label></td>
                <td class="text-right">$100.00</td>
            </tr>
            <tr>
                <td><label>Rebate:</label></td>
                <td class="text-right">$10.00</td>
            </tr>
            <tr>
                <td><label>Total:</label></td>
                <td class="text-right">$90.00</td>
            </tr>
        </tbody>
    </table>

PS：过去我尝试过其他一些选择，但是我想从Bootstrap 4中使用一些简单的方法。

Answer 1

dl实际上，使用a 是合适的，如果您可以使用截断的标签，则可以正常使用。

这是文档：https : //getbootstrap.com/docs/4.0/content/typography/#description-list-alignment

这是一个示例：

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>
</dl>

Answer 2

编辑：在这种情况下，表格非常合适，是的。

使用以下结构：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<table>
    <tr>
        <th class="small text-muted pr-2" scope="row">Label 1</th>
        <td>Value 1</td>
    </tr>
    <tr>
        <th class="small text-muted pr-2" scope="row">Label 2</th>
        <td>Value 2</td>
    </tr>
    <tr>
        <th class="small text-muted pr-2" scope="row">Label 3</th>
        <td>Value 3</td>
    </tr>
</table>

您还可以应用一些自定义 css，但我认为那些本机 Bootstrap 4 类几乎完全符合您的要求。

该类pr-2将“padding-right 2 个单位”应用于标签。