css - 如何水平对齐 bootstrap 4 导航菜单？

Question

不太清楚为什么导航选择不水平对齐。我也尝试设置指向 navbar-brand 的链接，但虽然它似乎使它们居中，但它会导致其他所有内容略微下降。我还怀疑我的选择选项与它有关，但为什么它与导航栏品牌水平匹配而链接不是？？？

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="/">Payload Examples</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
          </li>

          {% if session['name'] %}
          <li class="nav-item active">
              <a class="nav-link" style="cursor: default;" href="#" >Oauth Type: {{ session['auth_type'] }} </a>
            </li>
            <li>
              <a class="nav-link" href="{{ url_for('logout') }}" id="logout"
                 data-busy="href">Logout <span class="sr-only">(current)</span></a>
            </li>
          {% else %}
            <li>
              <label for='submit-form' class="nav-link" >Login</label> <span class="sr-only">(current)</span>
            </li>
          </ul>
          <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
            <ul class="navbar-nav ml-auto">
                  <li class="nav-item active"> <a class="navbar-brand" style="cursor: default;" href="#">Choose OAuth Scheme:</a></li>
                  <form action="{{ url_for('login') }}" method="POST"><select class="form-control" id="authType" name="authType">
                  <option>Auth</option>
                  <option>Grant</option>
                  <option disabled>Code</option>
                  </select>
                  <input type="submit" id="submit-form" class="hidden" />
                </form>
              <li>
                  <a class="nav-link mr-auto" target=_BLANK href="https://example.com/help">❔</a>
              </li>
            </ul>
          </ul>
          </div>
          {% endif %}
        </ul>
        {% if session['name'] %}
          <span class="navbar-text">
            Welcome {{ session['name'] }}
          </span>
        {% endif %}
      </div>
    </nav>

Answer 1

我删除了你的一些 {{this}} 类型的代码并使其水平居中。为此，我使用了 align-items-center 标签来水平居中，对于下拉菜单，我使用了 flexbox 功能来装饰它。您可以通过增加 width 来增加 select 标签的宽度。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="/">Payload Examples</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav align-items-center mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item active">
                <a class="nav-link" style="cursor: default;" href="#" >Hii</a>
            </li>
            <li>
                <a class="nav-link" href="{{ url_for('logout') }}" id="logout"
                data-busy="href">Logout <span class="sr-only">(current)</span></a>
            </li>
            <li>
                <label for='submit-form' class="nav-link m-0" >Login</label> <span class="sr-only">(current)</span>
            </li>
        </ul>
        <form method="POST" class="d-none d-md-flex">
            <a class="navbar-brand" style="cursor: default;" href="#">Choose OAuth Scheme:</a>
            <select class="form-control mx-3" id="authType" name="authType">
                <option>Auth</option>
                <option>Grant</option>
                <option disabled>Code</option>
            </select>
            <input type="submit" id="submit-form" class="btn btn-secondary">
        </form>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

如有任何帮助，您可以在评论框中与我联系