Bootstrap 4导航栏右对齐，不会在移动设备上折叠的按钮
[英]Bootstrap 4 navbar right align with button that doesn't collapse on mobile
问题描述
我正在尝试在导航栏中添加3个元素。 左对齐品牌，右对齐链接组在移动设备上折叠，以及一个附加按钮也像链接一样右对齐，但不应随其折叠。
要右对齐按钮和链接，我将它们包裹在ml-auto div中。 这在移动设备（第一张图片）上效果很好，但是在PC上，按钮显示在链接上方（第二张图片）。 我试图将btn-group添加到div可以进行的工作，但是按钮与链接合并，并且看起来很奇怪（第3张图片）。
如何正确将这些组件水平对齐？
请注意，我不希望该按钮与其他右侧链接位于同一组。 我希望该按钮即使在小屏幕上也始终可见。 我已经在SO上看到了一些类似的问题，但是它们在同一个可折叠组中都具有正确的对齐项目，这对我不利。
您可以将以下代码粘贴到w3school TryIt编辑器中
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Home</a>
<div class="ml-auto">
<button class="btn btn-success">My Button</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"/>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 2</a>
</li>
</ul>
</div>
</nav>
4 个解决方案
解决方案1
2 2018-08-15 09:44:29
我终于找到了解决方案。 诀窍是正确使用网格系统。 根据您对响应性的要求修改col类（在导航栏折叠部分）此外，按钮和折叠并不是您想要的属于同一组的一部分，因为将其包装在同一div中将导致折叠无法在移动设备上正常工作屏幕。 希望对您有帮助。
body { padding-top: 105px; } .collapse{ justify-content:flex-end; } .text-nowrap { white-space: nowrap; }
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"> <div class="container"> <a href="index.html" class="navbar-brand"> <h3 class="d-inline align-middle text-white"> Brand </h3> </a> <button id="myButton" class="btn btn-success ml-auto mr-2"> My button </button> <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarNav" class="col-md-3 col-lg-2 collapse navbar-collapse ml-5"> <ul class="navbar-nav "> <li class="nav-item"> <a href="#home" class="nav-link"><span class="text-nowrap">Right Link 1 </span></a> </li> <li class="nav-item"> <a href="#about" class="nav-link"><span class="text-nowrap">Right Link 2 </span></a> </li> </ul> </div> </div> </nav> <section> <div class="text-center"> <p>hello this is teadsfadsf adsfadfs adfsasdfadf adsf adsf asdf adsf asdf adsf a adfs ads f asd fadfs adfs ads fds fdfs asdfadsxt</p> </div> </section> </body> </html>
解决方案2
2 已采纳 2018-08-15 12:54:32
现有的答案都无法正常工作，并且需要复杂的技巧，而这些技巧不能正确使用Bootstrap 4导航栏。 这些答案中的导航栏无法在移动设备上正确显示。 .row仅用于包含网格列 ，并且不支持该网格Navbar内容
答案很简单 。 您需要做的唯一调整是禁用navbar-collapse上使用的flex-grow（使用flex-grow-0 ）。 这使ml-auto可以将按钮推向右侧。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
<a class="navbar-brand" href="#">Home</a>
<button class="btn btn-success ml-auto">My Button</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
<ul class="navbar-nav text-right">
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 2</a>
</li>
</ul>
</div>
</nav>
另外，如果您想在移动设备上直接链接，请在navbar-nav添加text-right。
演示： https ： //www.codeply.com/go/ljI9F6aRLk
另请参阅： Bootstrap 4-折叠之外的Navbar项
解决方案3
1 2018-08-15 03:50:07
我修改您的代码。 尝试在整页上查看此内容并相应地调整大小：
我在第一个按钮上添加d-sm-none类，在您的导航折叠上添加justify-content-end类，然后创建另一个按钮<button class="btn btn-success d-none d-sm-block">My Button</button>会成为导航折叠的一部分，并且以sm以外的其他尺寸显示时不会显示任何内容。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Home</a> <div class="ml-auto"> <button class="btn btn-success d-sm-none">My Button</button> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <button class="btn btn-success d-none d-sm-block">My Button</button> <ul class="navbar-nav ml-auto "> <li class="nav-item active"> <a class="nav-link" href="#">Right Link 1</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Right Link 2</a> </li> </ul> </div> </nav> <br> <div class="container"> <h3>Navbar Forms</h3> <p>Use the .form-inline class to align form elements side by side inside the navbar.</p> </div> </body> </html>
解决方案4
0 2018-08-15 08:29:30
弄清楚了。 在div中添加“行”会使它们水平堆叠。 虽然，这会在按下折叠按钮时引起一些有趣的行为。 它将转向中间。 添加更多的左边距会自动修复该问题。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Home</a>
<div class="row ml-auto">
<button class="btn btn-success ml-auto">My Button</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" />
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Right Link 2</a>
</li>
</ul>
</div>
</div>
</nav>
如何在Bootstrap 3中将正确的社交媒体图标与navbar-collapse对齐？
[英]How to align right social media icon with navbar-collapse in Bootstrap 3?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.