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>

我首先想到的是将list-group类与list-group-flush一起使用，并对默认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
我愿意使用外部库，只要它们与Bootstrap 4兼容即可

.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>

使用Bootstrap在<dd>标记内包含列表

1 个答案: