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

https://stackoverflow.com/questions/55858379
复制相似问题