Bootstrap列表项布局调整：左对齐内容，右对齐操作下拉菜单

修改后的完整代码 #

<!doctype html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>

<body>
    <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-start">
            <div>
                <div class="mb-1">A First item</div>
                <small class="text-secondary">This is a first item description</small>
            </div>
            <div class="btn-group">
                <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item">Edit</a></li>
                    <li><a class="dropdown-item" href="#">Delete</a></li>
                    <li><a class="dropdown-item" href="#">Run</a></li>
                </ul>
            </div>
            <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                <div class="modal-dialog modal-fullscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body"> What is Lorem Ipsum? </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
</body>

</html>

关键修改说明 #

• 实现左右对齐：给列表项<li>添加d-flex justify-content-between align-items-start类，借助Bootstrap的flex布局，让文本区域左对齐、下拉菜单右对齐，align-items-start保证内容顶部对齐，避免垂直居中导致的布局偏移。
• 缩小文本间距：将标题和描述包裹在同一个<div>内，给标题添加mb-1类（Bootstrap内置间距类，对应margin-bottom: 0.25rem），替换原有的<br>标签，精准控制主次文本的间距，比换行更灵活规范。
• 优化下拉菜单位置：把dropdown-menu-lg-end改为dropdown-menu-end，确保下拉菜单在所有屏幕尺寸下都能保持右对齐。

内容的提问来源于stack exchange，提问作者Code Guy