Bootstrap CSS按钮未对齐列表中的文本

xqk2d5yq 于 12个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(151)

正如你在这个截图中看到的，当添加按钮时，文本变得垂直不对齐（略高）。我如何避免这种情况？（Bootstrap 5）

的数据
代码如下：

<div class="container-fluid">
    <div class="row">
        <h2 class="border-bottom border-dark pt-4">Roles</h2>
    </div>
    <div class="card">
        <div class="card-header">
            <b>Roles</b>
        </div>

        <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between">Admins
                <button class="btn btn-sm btn-outline-secondary" type="button">View</button>
            </li>
            <li class="list-group-item d-flex justify-content-between">Custom
                <button class="btn btn-sm btn-outline-secondary" type="button">Edit</button>
            </li>
        </ul>
    </div>
</div>

字符串
编辑：我也应该包括文本在一个跨度内的李为好的措施

twitter-bootstrap

来源：https://stackoverflow.com/questions/69536065/css-button-misaligning-text-in-list

1条答案

按热度按时间

jhdbpxl91#

将类align-items-center添加到每个li

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <h2 class="border-bottom border-dark pt-4">Roles</h2>
    </div>
    <div class="card">
        <div class="card-header">
            <b>Roles</b>
        </div>

        <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between align-items-center">Admins
                <button class="btn btn-sm btn-outline-secondary" type="button">View</button>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Custom
                <button class="btn btn-sm btn-outline-secondary" type="button">Edit</button>
            </li>
        </ul>
    </div>
</div>

字符串

赞(0）回复(0）举报 12个月前

我来回答

Bootstrap CSS按钮未对齐列表中的文本

1条答案

相关问题

热门标签

最新问答