CSS float-right 在 Bootstrap 4 Navbar 中不起作用 [重复]

Question

我试图让我的导航链接浮动到我的导航栏的右侧，但我无法让它工作。我尝试使用“.float-right”、“float-xs-right”和“justify-content-end”引导程序 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 框架比较陌生，所以我可能只是犯了一个愚蠢的错误，但希望有人能帮助我。 :(

Answer 1

Bootstrap 5（2021 年更新）

Bootstrap 5 Navbar 仍然使用 flexbox，但是 right 和 left 的概念已经更改 为 start 和 end 表示新的RTL support。所以，类名变了……

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

See this question for details

---

引导程序 4

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

既然 Bootstrap 4 是 flexbox，对齐导航栏组件的一种方法是使用 auto-margin utility classes，例如 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 个导航栏组件（导航栏品牌和导航）。

Answer 2

您可以在父级 .row 上使用 .justify-content-between 将 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>

Answer 3

我尝试使用 Bootstrap 4.0.0 Alpha 6 并且它可以工作，示例如下：https://repl.it/JwMq/0

我刚刚添加了这个：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>

还有一个额外的</div>