HTML 按钮位置

Question

我想在 HTML 中制作一组简单的类似 GUI 的按钮。我正在使用 Bootstrap 来确保按钮看起来不错。This is the button setup I have so far. When I click a button, I want a similar setup to appear on the right side of it. 我已经有了按钮，但它们看起来像这样："Click here"。我希望原始按钮保持相同的位置，而其他按钮在单击其中一个后出现。任何帮助表示赞赏。

经过一番尝试，我非常接近我想要的： 但是，无论如何，我希望左排按钮始终位于顶部。在我单击它们之前，它们位于顶部，但是当我单击其中一个时，它们在右侧按钮组的中间对齐。任何帮助表示赞赏。

Answer 1

也许您可以使用导航选项卡引导程序。 例如像这样的代码

<div class="row">
<div class="col-12 col-md-2 p-3">

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">2021-07-05 15:00 </button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">2021-07-07 17:00 </button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">2021-08-09 19:00</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">2021-09-06 18:00</button>
  </div>
  </div>
  </div>
  
<div class="col-12 col-md-4 p-3">
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
    <div class="border p-1">2021-07-05 15:00</div>
    <div class="border p-1">2021-07-05 15:00</div>
    <div class="border p-1">2021-07-05 15:00</div>
    </div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
    2021-07-07 17:00 <br/>
    2021-07-07 17:00 <br/>
    2021-07-07 17:00 <br/>
    2021-07-07 17:00 <br/>
    </div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
    2021-08-09 19:00<hr/>
    2021-08-09 19:00<hr/>
    
    </div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
    <span class="bg-danger text-white">2021-09-06 18:00</span>
    </div>
  </div>
</div>
</div>

输出

当点击任意一个按钮时，会显示每个按钮中存储的数据。