首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何水平对齐bootstrap 4导航菜单?

如何水平对齐bootstrap 4导航菜单?
EN

Stack Overflow用户
提问于 2019-04-26 06:24:00
回答 1查看 85关注 0票数 0

不太确定为什么导航选择不按历史方向对齐。我也尝试过设置指向navbar-brand的链接,但当它似乎使它们居中时,它会导致其他所有东西都稍微向下拖累。我还怀疑我的select选项与它有关,但为什么它与navbar-brand水平匹配,而链接不是?

代码语言:javascript
运行
复制
<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>

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55858379

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档