如何水平对齐bootstrap 4导航菜单？
如何水平对齐bootstrap 4导航菜单？
提问于 2019-04-26 06:24:00
不太确定为什么导航选择不按历史方向对齐。我也尝试过设置指向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>
回答 1
Stack Overflow用户
发布于 2019-04-30 09:02:05
我删除了你的一些{{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>
如果您需要任何帮助，可以在评论框中与我联系
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55858379
复制相关文章
相似问题