时间戳

首页 > 解决方案 > 在手风琴按钮内对齐 2 个不同的元素 - Bootstrap 5

html - 在手风琴按钮内对齐 2 个不同的元素 - Bootstrap 5

问题描述

我正在使用 Bootstrap 5，并试图分别将<p>标签和 a对齐<span>到左侧和右侧。我尝试了很多不同的东西，如果它们在按钮标签内，我不能让它们走向相反的方向。也许这是设计使然，但我想我会在这里尝试。这是我的代码：

<div class="accordion" id="accordion2">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
                aria-expanded="true" aria-controls="collapse2">
                <p class="h5 float-start">Grade 2</p>
                <span class="h5 float-end">1 <i class="fas fa-book"></i></span>
            </button>
        </h2>
        <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion2">
            <div class="accordion-body" style="padding-bottom:0px;">
                <a href="http://localhost:8000/cm/unit/3" class="h5">Unit 1</a>&nbsp;&nbsp;&nbsp;&nbsp;<p>Some text goes here.</p>
            </div>
        </div>
    </div>
</div>

我得到以下结果（一切都向左对齐）。 在此处输入图像描述

听起来很简单，但在浏览网页寻找解决方案后，我无法让它工作。任何指针将不胜感激。

标签： htmlcssbootstrap-5

解决方案

为了在两端对齐子元素，您可以使用 bootstarpd-Flex类

    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
                aria-expanded="true" aria-controls="collapse2">
                <p class="h5 mb-0 flex-grow-1">Grade 2</p>
                <span class="h5 mb-0 pr-3">1 <i class="fas fa-book"></i></span>
            </button>
        </h2>
        <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion2">
            <div class="accordion-body" style="padding-bottom:0px;">
                <a href="http://localhost:8000/cm/unit/3" class="h5">Unit 1</a>&nbsp;&nbsp;&nbsp;&nbsp;<p>Some text goes here.</p>
            </div>
        </div>
    </div>
</div>```

推荐阅读