Bootstrap 4导航栏右对齐在移动设备上不折叠的按钮
Posted
技术标签:
【中文标题】Bootstrap 4导航栏右对齐在移动设备上不折叠的按钮【英文标题】：Bootstrap 4 navbar right align with button that doesn't collapse on mobile 【发布时间】：2019-01-21 22:58:35 【问题描述】：我正在尝试在导航栏上放置 3 个元素。一个左对齐的品牌，一组在移动设备上折叠的右对齐链接，以及一个与链接一样右对齐但不应与它们一起折叠的附加按钮。
为了右对齐按钮和链接，我将它们包裹在 ml-auto div 中。这在移动设备上效果很好（第一张图片），但在 PC 上，按钮出现在链接上方（第二张图片）。我试图将 btn-group 添加到 div 中，但该按钮与链接合并，看起来很奇怪（第三张图片）。
如何正确水平对齐这些组件？
请注意，我不希望按钮与其他正确的链接位于同一组中。我希望该按钮即使在小屏幕上也始终可见。我在 SO 上看到了一些类似的问题，但它们在同一个可折叠组中都有正确对齐的项目，这对我没有好处。
您可以将下面的代码粘贴到w3school TryIt editor
<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>
【问题讨论】：
【参考方案1】：现有的答案都不起作用，并且需要复杂的技巧，这些技巧不能正确使用 Bootstrap 4 导航栏。这些答案中的导航栏无法在移动设备上正确显示。 .row 仅用于包含网格列，grid isn't supported Navbar content
答案是简单。您需要的唯一调整是禁用在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 items outside the collapse
【讨论】：
【参考方案2】：我终于找到了解决办法。诀窍是正确使用网格系统。根据您对响应能力的要求修改 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>【讨论】：
【参考方案3】：我修改了你的代码。尝试在整页上查看此内容并相应调整大小：
我在第一个按钮上添加d-sm-noneclass，我在您的导航折叠上添加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>【讨论】：
嗨，不完全是，如果页面宽度在 700 左右，按钮仍然是堆叠的。它们在 770 左右水平移动... 嗨@under我编辑了我的代码。我将md 更改为sm。希望这会有所帮助。
汉堡菜单应该出现在您的代码中没有出现的小屏幕上。..【参考方案4】：
想通了。将“行”添加到 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>
【讨论】：
看看我的解决方案。.row 不应用于导航栏。以上是关于Bootstrap 4导航栏右对齐在移动设备上不折叠的按钮的主要内容，如果未能解决你的问题，请参考以下文章
Twitter Bootstrap (v2.2.1) 下拉链接在移动设备上不起作用
Bootstrap 4将两个导航栏菜单按钮对齐到右侧[重复]