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框架比较陌生，所以我可能会犯一个愚蠢的错误，但希望有人可以帮助我。：（

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>

Answer 2

更新2018 - Bootstrap 4.0.0

原始答案在Bootstrap 4.0.0中不再有效，并且在导航栏组件中使用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之类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

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

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>

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

3 个答案: