Bootstrap 4导航栏右对齐在移动设备上不折叠的按钮答案

【问题标题】：Bootstrap 4 navbar right align with button that doesn't collapse on mobileBootstrap 4导航栏右对齐在移动设备上不折叠的按钮
【发布时间】：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>

【问题讨论】：

标签： html css bootstrap-4

【解决方案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 不应用于导航栏。