带有选择和标签的 Bootstrap 5 导航栏答案

【问题标题】：Bootstrap 5 navbar with Selects and Labels带有选择和标签的 Bootstrap 5 导航栏
【发布时间】：2022-01-19 23:32:15
【问题描述】：

如何制作一个带有多个selects和对应labels的Bootstrap 5.1 navbar？

+------------------------------------------------------------+
| Brand  Label [select v]  Label [select v]                  |
+------------------------------------------------------------+

我在 Bootstrap 文档中找不到类似的示例。当我尝试时，标签没有正确垂直对齐，并且除品牌之外的所有元素都向右对齐。

这是我当前的代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light mt-3 mb-3">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Live Charts</a>

    <form class="row">
      <div class="col-auto">
        <label for="main-chart-symbol" class="form-label">Symbol</label>
      </div>
      <div class="col-auto">
        <select class="form-select" id="main-chart-symbol">
          <option value="BTCUSDT" selected>BTCUSDT</option>
          <option value="ETHUSDT">ETHUSDT</option>
          <option value="BNBUSDT">BNBUSDT</option>
          <option value="DOGEUSDT">DOGEUSDT </option>
          <option value="SOLUSDT">SOLUSDT</option>
        </select>
      </div>

      <div class="col-auto">
        <label for="main-chart-period" class="form-label">Period</label>
      </div>
      <div class="col-auto">
        <select class="form-select" id="main-chart-period">
          <option value="M1" >M1 </option>
          <option value="M5" >M5 </option>
          <option value="M15" selected>M15</option>
          <option value="M30">M30</option>
          <option value="H1" >H1 </option>
          <option value="H4" >H4 </option>
          <option value="D1" >D1 </option>
        </select>
      </div>
    </form>
  </div>
</nav>

【问题讨论】：

您需要使用align-self-center 以及col-form-label 而不是form-label 作为标签类。例如：<div class="col-auto align-self-center"> <label for="main-chart-symbol" class="col-form-label">Symbol</label> </div>
@HDP，如何将form 对齐到品牌旁边的左侧？
您需要为此使用me-auto。像那样 - <form class="row me-auto">

标签： html forms twitter-bootstrap select bootstrap-5

【解决方案1】：

我通过修改a Bootstrap 5 compatible theme 开发了一个解决方案。希望能帮上忙。

网页测试图片如下：

网页HTML代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
      <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a class="nav-link" href="//codeply.com">Overview</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Inventory</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Customers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Products</a>
          </li>
        </ul>
      </div>

      <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar7">
        <div class="navbar-collapse collapse" id="collapseNavbar">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="" data-bs-target="#myModal" data-bs-toggle="modal">Symbol</a>
            </li>
          </ul>
        </div>

        <ul class="navbar-nav ms-auto flex-nowrap">
          <li class="nav-item">
            <select class="form-select" id="main-chart-period" style="width: 130px;">
              <option value="BTCUSDT" selected>BTCUSDT</option>
              <option value="ETHUSDT">ETHUSDT</option>
              <option value="BNBUSDT">BNBUSDT</option>
              <option value="DOGEUSDT">DOGEUSDT </option>
              <option value="SOLUSDT">SOLUSDT</option>
            </select>
          </li>

          <div class="navbar-collapse collapse" id="collapseNavbar">
            <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                <a class="nav-link" href="" data-bs-target="#myModal" data-bs-toggle="modal">Period</a>
              </li>
            </ul>
          </div>

          <li class="nav-item">
            <select class="form-select" id="main-chart-period" style="width: 82px;">
              <option value="M1">M1 </option>
              <option value="M5">M5 </option>
              <option value="M15" selected>M15</option>
              <option value="M30">M30</option>
              <option value="H1">H1 </option>
              <option value="H4">H4 </option>
              <option value="D1">D1 </option>
            </select>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

【讨论】：