在 Bootstrap 4 中将一些 nav-pills 元素右对齐
Align some nav-pills elements to right in Bootstrap 4
我正在使用 Bootstrap 4-beta2 的 nav-pills
来实现选项卡式界面。
如何将一些元素对齐到屏幕右侧?
对最后一个 li
项设置 ml-auto
无效。将 ul
分成两个 ul
也不起作用,因为它允许 tabright
与 tableft1
.[=19= 同时激活]
<nav class="fixed-top bg-dark">
<div class="navbar">
<a class="navbar-brand" href="#tabmain">Brand</a>
<ul class="nav nav-pills mr-auto">
<li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li>
<li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li>
<li class="nav-pill"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li>
</ul>
</div>
</nav>
原来 navbar
是弹性的,所以弹性特定的 类 有帮助:
<nav class="fixed-top bg-dark">
<div class="navbar justify-content-start flex-nowrap">
<a class="navbar-brand" href="#tabmain">Brand</a>
<ul class="nav nav-pills w-100">
<li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li>
<li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li>
<li class="nav-pill ml-auto"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li>
</ul>
</div>
</nav>
我正在使用 Bootstrap 4-beta2 的 nav-pills
来实现选项卡式界面。
如何将一些元素对齐到屏幕右侧?
对最后一个 li
项设置 ml-auto
无效。将 ul
分成两个 ul
也不起作用,因为它允许 tabright
与 tableft1
.[=19= 同时激活]
<nav class="fixed-top bg-dark">
<div class="navbar">
<a class="navbar-brand" href="#tabmain">Brand</a>
<ul class="nav nav-pills mr-auto">
<li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li>
<li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li>
<li class="nav-pill"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li>
</ul>
</div>
</nav>
原来 navbar
是弹性的,所以弹性特定的 类 有帮助:
<nav class="fixed-top bg-dark">
<div class="navbar justify-content-start flex-nowrap">
<a class="navbar-brand" href="#tabmain">Brand</a>
<ul class="nav nav-pills w-100">
<li class="nav-pill active"><a class="nav-link" href="#tableft1" data-toggle="pill">TabLeft1</a></li>
<li class="nav-pill"><a class="nav-link" href="#tableft2" data-toggle="pill">TabLeft2</a></li>
<li class="nav-pill ml-auto"><a class="nav-link" href="#tabright" data-toggle="pill">TabRight</a></li>
</ul>
</div>
</nav>