CSS右浮动在Bootstrap 4导航栏中不起作用

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。因此，类名已更改...

• 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 中不再有效，并且.row在导航栏组件中使用 Bootstrap 不是一个好习惯。本.row应只用于网格列。

现在 Bootstrap 4 是flexbox，对齐导航栏组件的一种方法是使用auto-margin 实用程序类，例如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>

或者可以在导航栏内部使用flexbox utils 之类的...justify-content-betweencontainer

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

Answer 2

您可以.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>