使用引导带在<dd>标记中具有一个列表

Question

世界!

我正试图找到一种很好的方法，在标签中包含多行信息。目前，我有以下几点：

<dl class="row">
    <dt class="col-2">
        Role Name
    </dt>
    <dd class="col-10">
        Test Role
    </dd>

    <!-- IsActive -->
    <dt class="col-2">
        Active
    </dt>
    <dd class="col-10">
        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
    </dd>

    <!-- Groups -->
    <dt class="col-2">
        Groups
    </dt>
    <dd class="col-10">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">testadgroup1</li>
            <li class="list-group-item">testadgroup2</li>
            <li class="list-group-item">testadgroup3</li>
        </ul>
    </dd>
</dl>

我的第一个想法是使用列表组类以及列表组刷新，并对默认的CSS进行以下更改：

.list-group-item {
    padding-left: .625rem;
    padding-right: .625rem;
    padding-top: .375rem;
    padding-bottom: .375rem;
}

.list-group-item:first-of-type {
    padding-top: 0rem;
}

这是可行的，但我觉得必须有一个更好的方法来实现类似的行为，但我没有看到。

其他说明，如有关系：

• 我正在使用Bootstrap 4，ASP.NET MVC
• 我愿意使用外部库，只要它们能很好地使用Bootstra4

​

.list-group-item {
        padding-left: .625rem;
        padding-right: .625rem;
        padding-top: .375rem;
        padding-bottom: .375rem;
    }

    .list-group-item:first-of-type {
        padding-top: 0rem;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<dt class="col-2">
            Role Name
        </dt>
        <dd class="col-10">
            Test Role
        </dd>

        <!-- IsActive -->
        <dt class="col-2">
            Active
        </dt>
        <dd class="col-10">
            <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
        </dd>

        <!-- Groups -->
        <dt class="col-2">
            Groups
        </dt>
        <dd class="col-10">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">testadgroup1</li>
                <li class="list-group-item">testadgroup2</li>
                <li class="list-group-item">testadgroup3</li>
            </ul>
        </dd>
    </dl>

​

Answer 1

非常感谢Marshall Tigerus对我最初帖子的评论。

有了他的小费，我设法使事情看起来相当不错，几乎没有任何开销。

我的新代码：

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<dl class="row">
    <!-- RoleName -->
    <dt class="col-2">
        Role Name
    </dt>
    <dd class="col-10">
        Test Role
    </dd>

    <!-- IsActive -->
    <dt class="col-2">
        Active
    </dt>
    <dd class="col-10">
        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
    </dd>

    <!-- Groups -->
    <dt class="col-2">
        Groups
    </dt>
    <dd class="col-10">
        <div class="row">
            <div class="col-12">testadgroup1</div>
            <div class="col-12">testadgroup2</div>
            <div class="col-12">testadgroup3</div>
        </div>
    </dd>
</dl>

​