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

【问题标题】：Align some nav-pills elements to right in Bootstrap 4在 Bootstrap 4 中将一些 nav-pills 元素右对齐
【发布时间】：2017-12-16 19:22:21
【问题描述】：

我正在使用 Bootstrap 4-beta2 的nav-pills 来实现选项卡式界面。

如何将某些元素对齐到屏幕右侧？

在最后一个 li 项目上设置 ml-auto 不起作用。将ul 拆分为两个ul 也不起作用，因为它允许tabright 与tableft1 同时处于活动状态。

<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>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 nav twitter-bootstrap-4 nav-pills

【解决方案1】：

原来navbar 是 flex，因此特定于 flex 的类会有所帮助：

<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>

【讨论】：