twitter-bootstrap CSS float-right 在 Bootstrap 4 导航栏中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45494882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS float-right not working in Bootstrap 4 Navbar
提问by Jake Scervino
I'm trying to get my nav links to float to the right of my navbar, but I can't get it to work. I've tried using the ".float-right", "float-xs-right", and "justify-content-end" bootstrap 4 class, along with using "float: right !important;" in my CSS file, and it still won't work.
我试图让我的导航链接浮动到我的导航栏的右侧，但我无法让它工作。我尝试过使用“.float-right”、“float-xs-right”和“justify-content-end”引导程序 4 类，以及使用“float: right !important;” 在我的 CSS 文件中，它仍然不起作用。
Here is the HTML for the navbar of my website:
这是我网站导航栏的 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>
And here is the CSS:
这是CSS：
#navbar {
box-shadow: 0px 0px 11px #000;
padding: 0;
}
#navbar .navbar-brand {
font-size: 1.6em;
font-weight: bold;
color: #9CCC58;
}
I'm relatively new to the Bootstrap 4 framework, so it's possible that I might just be making a dumb mistake, but hopefully someone can help me. :(
我对 Bootstrap 4 框架比较陌生，所以我可能只是犯了一个愚蠢的错误，但希望有人能帮助我。:(
采纳答案by Michael Coker
You can use .justify-content-betweenon the parent .rowto move the flex children to the far edges of the row.
您可以.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>回答by Zim
Update 2018 - Bootstrap 4.0.0
2018 年更新 - Bootstrap 4.0.0
The original answer no longer works in Bootstrap 4.0.0, and it's not good practice to use Bootstrap's .rowin the navbar component. The .rowshould only be used for grid columns.
原始答案不再适用于 Bootstrap 4.0.0，.row在导航栏组件中使用 Bootstrap 不是一个好习惯。本.row应只用于网格列。
Now that Bootstrap 4 is flexbox, one way to align navbar components is using the auto-margin utility classes, such as ml-autowhich is a shortcut for CSS margin-left:auto. This can be used to push the navto the right...
现在 Bootstrap 4 是 flexbox，对齐导航栏组件的一种方法是使用auto-margin 实用程序类，例如ml-auto这是 CSS 的快捷方式margin-left:auto。这可以用来nav向右推...
https://www.codeply.com/go/ZAGhCX5lpq
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>
Or the flexbox utilslike justify-content-betweencan be used on the containerinside the navbar...
或者可以在导航栏内部使用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>
Just notice that in this case justify-content-betweenworks because there are only 2 navbar components (navbar-brand and nav).
请注意，在这种情况下justify-content-between有效，因为只有 2 个导航栏组件（navbar-brand 和 nav）。
回答by DarkCeptor44
I tried with Bootstrap 4.0.0 Alpha 6 and it works, here's the example: https://repl.it/JwMq/0
我尝试使用 Bootstrap 4.0.0 Alpha 6 并且它有效，示例如下：https: //repl.it/JwMq/0
I just added this:
我刚刚添加了这个：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
And a extra </div>
还有一个额外的 </div>
