Question

我有一个基本的bootstrap导航栏，它会崩溃。现在我希望<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类中的颜色。据我所知，这确实不会影响作业。

我尝试在pull-right代码上使用pull-lg-right，float-lg-right，justify-????-end，<ul>。

有人知道如何实现这个目标吗？

Answer 1

由于您使用的是bootstrap，请将类navbar-right添加到ul

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

Answer 2

<强>解决

我必须使用两个list-tag，第一个使用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>

Answer 3

我相信那些拉动类使用响应式大小调整。你尝试过像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>

Answer 4

尝试

@media all and (min-width: 768px) {
    ul.nav {
        float: right;
    }
}

Bootstrap 4，对齐导航栏项目

4 个答案: