时间戳

首页 > 解决方案 > HTML 按钮位置

html - HTML 按钮位置

问题描述

我想在 HTML 中制作一组简单的类似 GUI 的按钮。我正在使用 Bootstrap 来确保按钮看起来不错。这是我到目前为止的按钮设置。当我单击一个按钮时，我希望在它的右侧出现类似的设置。我已经有了按钮，但它们看起来像这样：“单击此处”。我希望原始按钮保持相同的位置，并在单击其中一个按钮后出现其他按钮。任何帮助表示赞赏。

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

标签： htmlbuttonfrontendplacement

解决方案

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

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

输出 引导程序

单击任何按钮时，它将显示存储在每个按钮中的数据。

推荐阅读