时间戳

首页 > 解决方案 > 在 Bootstrap 手风琴中左右对齐文本

html - 在 Bootstrap 手风琴中左右对齐文本

问题描述

我在 Bootstrap 中有一个手风琴，但我想要左侧的文本，但也需要右侧的文本，右侧是控制折叠的箭头：

理由是如何错位的

我有：

<div class="accordion accordion-flush" id="accordion-tracks">
 <div class="accordion-item">
  <h2 class="accordion-header" id="heading-1">

   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
     <div class="d-flex justify-content-between w-100">
        <div>1. The Eater Of Dreams</div>
        <div style="padding-right: 10px;">0:52</div>
     </div>
   </button>

 </h2>
....

我不确定是否button建议在 a 中执行此操作。我也尝试过spanand float-start，float-end但这似乎不起作用。

谢谢

标签： htmlcsstwitter-bootstrapbootstrap-5

解决方案

从Bootstrap 文档中的示例开始，您只需要做两件事：

  1. 在按钮标签内添加几个容器标签以创建两列。
  2. 为按钮添加一个类并将其设置为网格。

您最终将在网格内得到 3 列，一列用于标题，一列用于时间，一列用于箭头（这是一个伪元素）

button.acc-btn {
  /* create a grid */
  display: grid;
  /* create colums. 1fr means use available space */
  grid-template-columns: 1fr max-content max-content;
  align-items: center;
  grid-gap: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="acc-btn accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <span class="title">
                    1. The Eater Of Dreams
                </span>
                <span class="time">
                    0:52
                </span>
            </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="acc-btn accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <span class="title">
                    1. The Eater Of Dreams
                </span>
                <span class="time">
                    0:52
                </span>
            </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

推荐阅读