Bootstrap 4，右对齐导航栏项目[重复]答案

【问题标题】：Bootstrap 4, allign navbar items right [duplicate]Bootstrap 4，右对齐导航栏项目[重复]
【发布时间】：2017-06-11 07:05:03
【问题描述】：

我有一个基本的引导导航栏，它会崩溃。现在我希望<ul> 标签中的所有项目都位于屏幕的右侧。当菜单未折叠时。

<nav class="navbar fixed-top navbar-toggleable-md navbar-custom">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main_navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">&#9776;</span>
    </button>
    <a class="navbar-brand" href="">
        navbar
    </a>

    <div class="collapse navbar-collapse" id="main_navbar">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

目前唯一的自定义样式是 navbar-custom 类中的颜色。据我所知，这确实对对齐没有影响。

我尝试在<ul> 标签上使用pull-right、pull-lg-right、float-lg-right、justify-????-end。

有没有人知道如何实现这一目标？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

由于您使用的是引导程序，因此将类 navbar-right 添加到 ul

<ul class="nav navbar-nav navbar-right">

【讨论】：

navbar-right 在 Bootstrap v4 中不存在，这就是这个问题的意义所在，所以这不起作用。

【解决方案2】：

我相信那些拉类使用响应式大小。您是否尝试过使用 pull-xs-right 之类的东西？

<nav class="navbar fixed-top navbar-toggleable-md navbar-custom pull-xs-right">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main_navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon">&#9776;</span>
</button>
<a class="navbar-brand" href="">
    navbar
</a>

<div class="collapse navbar-collapse" id="main_navbar">
    <ul class="nav navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Disabled</a>
        </li>
    </ul>
</div>

【讨论】：

【解决方案3】：

已解决

我必须使用两个列表标签，第一个使用 mr-auto 类。如上所述here

<div class="collapse navbar-collapse" id="main_navbar">
    <ul class="nav navbar-nav mr-auto"></ul> <!-- Add this one -->
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">home</a>
        </li>
    </ul>
</div>

【讨论】：