CSS float-right 在 Bootstrap 4 Navbar 中不起作用

Question

我试图让我的导航链接浮动到我的导航栏的右侧，但我无法让它工作。我试过使用“.float-right”、“float-xs-right”和“justify-content-end”bootstrap 4 类，以及使用“float: right !important;”在我的 CSS 文件中，它仍然无法工作。

这是我网站导航栏的 HTML：

 <div id="navbar" class="navbar navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="navbar-brand">
                <img src="images/logo.png" width="88px">
                Scervino Lawn Service
            </div>
            <ul class="nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</div>

这是 CSS：

 #navbar {
    box-shadow: 0px 0px 11px #000;
    padding: 0;
}

#navbar .navbar-brand {
    font-size: 1.6em;
    font-weight: bold;
    color: #9CCC58;
}

我对 Bootstrap 4 框架比较陌生，所以我可能只是犯了一个愚蠢的错误，但希望有人能帮助我。 :(

原文由 Jake Scervino 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在父级上使用 .justify-content-between .row 将 flex 子级移动到行的最远边缘。

 #navbar {
    box-shadow: 0px 0px 11px #000;
    padding: 0;
}

#navbar .navbar-brand {
    font-size: 1.6em;
    font-weight: bold;
    color: #9CCC58;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar" class="navbar navbar-fixed-top">
    <div class="container">
        <div class="row justify-content-between">
            <div class="navbar-brand">
                <img src="images/logo.png" width="88px">
                Scervino Lawn Service
            </div>
            <ul class="nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>

原文由 Michael Coker 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Bootstrap 5 （2021 年更新）

Bootstrap 5 Navbar 仍然使用 flexbox，但 右 和 左 的概念已 更改 为新的 RTL 支持 的 开始 和 结束。因此，班级名称已更改…

• float-right > float-end
• float-left > float-start
• ml-* –> ms-*
• pl-* –> ps-*
• mr-* –> me-*
• pr-* –> pe-*

但是，请记住 浮动不适用于 flexbox 。在导航栏中右对齐的最佳方法是使用 ms-auto (margin-left: auto) 或 justify-content-end 。

有关详细信息，请参阅此问题

---

引导程序 4

原始答案在 Bootstrap 4 中不再有效，并且在导航栏组件中使用 Bootstrap 的 .row 并不是一个好习惯。 .row 应该只用于网格列。

现在 Bootstrap 4 是 flexbox ，对齐导航栏组件的一种方法是使用 自动边距实用程序类，例如 ml-auto 这是 CSS 的快捷方式 margin-left:auto 。这可用于将 nav 推到右边……

https://www.codeply.com/go/ZAGhCX5lpq

 <div id="navbar" class="navbar navbar-expand navbar-fixed-top">
    <div class="container">
        <div class="navbar-brand">
            <img src=".." width="88px">
             Scervino Lawn Service
        </div>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact">Contact</a>
            </li>
        </ul>
    </div>
</div>

或者像 justify-content-between 这样的 flexbox utils 可以在导航栏内的 container 上使用…

 <div id="navbar" class="navbar navbar-expand navbar-fixed-top">
    <div class="container justify-content-between">
        <div class="navbar-brand">
            <img src=".." width="88px">
             Scervino Lawn Service
        </div>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact">Contact</a>
            </li>
        </ul>
    </div>
</div>

请注意，在这种情况下 justify-content-between 有效，因为只有 2 个导航栏组件（navbar-brand 和 nav）。

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议