在 Bootstrap 4 中将一些 nav-pills 元素右对齐

Question

我正在使用 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>

Answer 1

原来 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 中将一些 nav-pills 元素右对齐

Align some nav-pills elements to right in Bootstrap 4

twitter-bootstrap

bootstrap-4

nav

twitter-bootstrap-4

nav-pills