代码之家  ›  专栏  ›  技术社区  ›  Code Guy

在引导程序中对齐列表中的项目

css html
  •  1
  • Code Guy  · 技术社区  · 2 年前

    我想左对齐项目名称及其描述,而右对齐操作下拉列表。 列表项和次要文本之间的间距也必须减小,

    我现在看到的错误输出是 enter image description here

    预期输出应该是这样的 enter image description here 

    <!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">
A First item<br/>
<small class="text-secondary">This is a first item description</small>
            <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-lg-end">
                    <li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">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>
    2 回复  |  直到 2 年前
        1
  •  1
  •   kmoser    2 年前

    添加 float-end 类到 <div class="btn-group"> 所以它变成 <div class="btn-group float-end"> 。

    此外,移动 <div> 所以它是 <li> 。

    要减少项目与其描述之间的空间,请更改 line-height 的属性 <li class="list-group-item"> ,例如。 <li class="list-group-item" style="line-height: 1.1rem"> 

    <!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">
            <div class="btn-group float-end">
                <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-lg-end">
                    <li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">Edit</a></li>
                    <li><a class="dropdown-item" href="#">Delete</a></li>
                    <li><a class="dropdown-item" href="#">Run</a></li>
                </ul>
            </div>
A First item<br/>
<small class="text-secondary">This is a first item description</small>
            <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>
        2
  •  0
  •   Deshan Dissanayake    2 年前

    试试这个 

    <!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">
        <div>
        A First item<br/>
        <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-lg-end">
                    <li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">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>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    5 月前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    5 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    5 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    5 月前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    5 月前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    6 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    6 月前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    6 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    6 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    6 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号