html - 在 Bootstrap Accordion 中将文本左对齐和右对齐

Question

我在 Bootstrap 中有一个 Accordion ，但我想要左侧有文本，但也需要右侧，就在控制折叠的箭头右侧:

我有:

<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>
....

我不确定是否建议在按钮中执行此操作。我也尝试过使用 span 和 float-start 和 float-end 但这似乎不起作用。

谢谢

Answer 1

从 Bootstrap docs 中的示例开始，你只需要做两件事:

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a0adadb6b1b6b0a3b282f7ecf2ecf3" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2924243f383f392a3b0b7e657b657a" rel="noreferrer noopener nofollow">[email protected]</a>/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" 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="headingTwo">
      <button class="acc-btn accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                <span class="title">
                    1. The Eater Of Dreams
                </span>
                <span class="time">
                    0:52
                </span>
            </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" 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>