Question

我正在尝试在导航栏中添加3个元素。左对齐品牌，右对齐链接组在移动设备上折叠，以及一个附加按钮也像链接一样右对齐，但不应随其折叠。

为使按钮和链接右对齐，我将它们包裹在ml-auto div中。这在移动设备（第一张图片）上效果很好，但是在PC上，按钮显示在链接上方（第二张图片）。我试图将btn-group添加到div可以进行的工作，但是按钮与链接合并，并且看起来很奇怪（第3张图片）。

如何正确地将这些组件水平对齐？

请注意，我不希望该按钮与其他右侧链接位于同一组中。我希望该按钮即使在小屏幕上也始终可见。我已经在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>

Answer 1

我终于找到了解决方案。诀窍是正确使用网格系统。根据您对响应性的要求修改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>

Answer 2

现有答案都无法使用，并且需要复杂的技巧，而这些技巧不能正确使用Bootstrap 4导航栏。这些答案中的导航栏无法在移动设备上正确显示。 .row仅包含网格列，而grid isn't supported Navbar content

答案是简单。您需要的仅调整是禁用flex-grow-0上使用的flex-grow（使用navbar-collapse）。这允许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添加文本权限。

演示：https://www.codeply.com/go/ljI9F6aRLk

另请参阅：Bootstrap 4 - Navbar items outside the collapse

Answer 3

我修改了您的代码。尝试在整页上查看此内容并相应调整大小：

我在第一个按钮上添加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>

Answer 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>

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

4 个答案: