这应该适用于alpha 6.关键是左侧导航栏中的“mr-auto”类,它会将右侧导航向右推。您还需要添加navbar-toggleable-md,否则它将堆叠在一列而不是一行中。注意我没有添加剩余的切换项(例如切换按钮),我添加了足够的内容以使其按要求格式化。这里有更完整的例子 https://v4-alpha.getbootstrap.com/examples/navbars/ 。
<!DOCTYPE html> <html lang="en"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link on the Right</a> </li> </ul> </div> </nav> </body>
的 TL; DR: 强>
创建另一个 <ul class="navbar-nav ml-auto"> 对于您想要的导航栏项目。 ml-auto 会拉你的 navbar-nav 在哪里 mr-auto 将它拉到左边。
<ul class="navbar-nav ml-auto">
ml-auto
navbar-nav
mr-auto
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/> <style> /* Stackoverflow preview fix, please ignore */ .navbar-nav { flex-direction: row; } .nav-link { padding-right: .5rem !important; padding-left: .5rem !important; } /* Fixes dropdown menus placed on the right side */ .ml-auto .dropdown-menu { left: auto !important; right: 0px; } </style> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded"> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link">Left Link 1</a> </li> <li class="nav-item"> <a class="nav-link">Left Link 2</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link">Right Link 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown on Right</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a> </div> </li> </ul> </nav> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> </body> </html>
正如您所看到的,已添加其他样式规则以解决Stackoverflows预览框中的一些奇怪问题。 您应该能够安全地忽略项目中的这些规则。
从v4.0.0开始,这似乎是正式的方法。
的 编辑: 强> 我根据@Bruno的建议修改了Post以包含放置在导航栏右侧的下拉列表。它需要它 left 和 right 要倒置的属性。我在示例代码的开头添加了一个额外的css片段。 请注意,该示例显示了您单击时的移动版本 Run code snippet 按钮。要查看桌面版本,您必须单击 Expand snippet 按钮。
left
right
Run code snippet
Expand snippet
.ml-auto .dropdown-menu { left: auto !important; right: 0px; }
在样式表中包含这个应该可以解决问题。
在Bootstrap 4 alpha-6版本中,由于导航栏使用的是flex模型,因此可以使用 justify-content-end 在父母的div中删除 mr-auto 。
justify-content-end
<div class="collapse navbar-collapse justify-content-end" id="navbarText"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div>
这就像一个魅力:)
使用Bootstrap v4.0.0-alpha.6:两个 <ul> s( .navbar-na ),一个用 .mr-auto 和一个 .ml-auto :
<ul>
.navbar-na
.mr-auto
.ml-auto
<nav ...> ... <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Left Link </a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Right Link </a> </li> </ul> </div> </nav>
就我而言,我一直在寻找一种允许的解决方案 的 一 强> 要对齐的导航栏项目。为此,您必须添加 style="width:100%;" 到了 <ul class="navbar-nav"> 和 然后 加上 ml-auto 您的导航栏项的类。
style="width:100%;"
<ul class="navbar-nav">
这里和简单的例子。
<!-- Navigation bar--> <nav class="navbar navbar-toggleable-md bg-info navbar-inverse"> <div class="container"> <button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mainMenu"> <div class="navbar-nav ml-auto " style="width:100%"> <a class="nav-item nav-link active" href="#">Home</a> <a class="nav-item nav-link" href="#">About</a> <a class="nav-item nav-link" href="#">Training</a> <a class="nav-item nav-link" href="#">Contact</a> </div> </div> </div> </nav>
在版本4中,它更容易。刚放一个 ml-auto 在课堂上 ul 像这样:
ul
<ul class="nav navbar-nav ml-auto">