Bootstrap 4将导航栏项目对齐到右侧

Question

如何将导航栏项目对齐？

我想要登录并向右注册。 但我尝试的一切似乎都不起作用。

这是我到目前为止所尝试的：

使用属性<div> 在<ul>周围
• style="float: right" 使用属性<div>
在<ul>周围
• style="text-align: right"
• 在<li>代码
上尝试了这两件事
• 在!important添加到最后
时再次尝试了所有这些内容
• 在nav-item
中将nav-right更改为<li>
• 在pull-sm-right
中添加了<li>课程
• 在align-content-end
中添加了<li>课程

这是我的代码：

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

Answer 1

Bootstrap 4 有many different ways to align navbar items。 float-right无效，因为导航栏现在为flexbox。

您可以在第一个（左）mr-auto上使用新的navbar-nav作为自动右边距。 另外，ml-auto可用于第二（右）navbar-nav，或者如果您只有一个navbar-nav。< / p>

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
</div>

http://www.codeply.com/go/P0G393rzfm

还有flexbox utils。在这种情况下，您有2个navbar-nav s，因此justify-content-between中的navbar-collapse可以在它们之间的空间工作，

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

<小时/> 更新Bootstrap 4.0及更新

从Bootstrap 4测试版开始，ml-auto仍然可以将项目推向右侧。请注意，navbar-toggleable-类已更改为navbar-expand-*

更新了navbar right for Bootstrap 4

另一个频繁的Bootstrap 4 Navbar右对齐方案包括右侧的按钮，保持在移动崩溃导航之外，因此它始终以所有宽度显示。

Right align button that is always visible

相关：Bootstrap NavBar with left, center or right aligned items

Answer 2

在我的情况下，我只想要一组导航按钮/选项，并发现这将起作用：

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

因此，您会将justify-content-end添加到div并在列表中省略mr-auto。

这是working example。

Answer 3

对于那些仍然在BS4中遇到此问题的人，只需尝试下面的代码 -

<ul class="navbar-nav ml-auto">

Answer 4

在logger.close()上，此处列出的答案均不适合我。最后，Bootstrap网站给了我解决方案，而不是通过其文档，而是通过其页面源代码......

Getbootstrap.com在以下课程的帮助下将他们的右Bootsrap 4.0.0-beta.2右对齐：navbar-nav。

Answer 5

在Bootstrap 4上

如果您想将品牌左侧和所有导航栏项目对齐，请将默认mr-auto更改为ml-auto

<ul class="navbar-nav ml-auto">

Answer 6

将ml-auto justify-content-end应用于mr-auto

后，使用nav代替ul

Answer 7

在bootstrap v4.3中，只需在ml-auto中添加<ul class="navbar-nav"> 例如：<ul class="navbar-nav ml-auto">

Answer 8

如果您希望在nav-brand之后立即离开主页，功能和定价，然后在右侧登录并注册，请将这两个列表包裹在<div>中并使用.justify-content-between：

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>

Answer 9

只需在ul

添加mr-auto类

<ul class="nav navbar-nav mr-auto">

如果您有双方的菜单列表，您可以执行以下操作：

<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="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">left 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">left 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">left disable</a>
            </li>
        </ul>

Answer 10

使用flex-row-reverse类

data: JSON.stringify({
    "vendorID": $('#ContentPlaceHolder1_ddlVendorID :selected').text()
}),

Answer 11

使用此代码将项目移至右侧。

div class="collapse navbar-collapse justify-content-end" 

Answer 12

令人惊讶的是，上述答案对我不起作用，所以这是我的方法。要将登录和注册导航栏项目与右侧对齐，您可以使用以下两种方式之一：

1. 向右拉： 修改登录和注册的无序列表标签

   <ul class="navbar-nav pull-right">

2. 右导航栏： 修改登录和注册的无序列表标签

   <ul class="navbar-nav navbar-right">

Answer 13

boostrap 4几乎没有变化。 要将导航栏对齐到右侧，只需进行两项更改。 他们是：

1. 在navbar-nav类中，将w-100添加为navbar-nav w-100以使宽度为100
2. 在nav-item dropdown类中，将ml-auto添加为nav-item dropdown ml-auto，以使边距保留为自动。

如果您不了解，请参阅我所附的图片。

CodePen Link

完整的源代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav w-100">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>

Answer 14

BS v4.0.0-beta.2的工作示例：

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricingg</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>

Answer 15

使用bootstrap flex box有帮助 我们控制导航元素的放置和对齐。 对于上面的问题，添加mr-auto是一个更好的解决方案。

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav  " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

其他展示位置可能包括

fixed- top
    fixed bottom
    sticky-top

Answer 16

如果以上都失败了，我在CSS中的navbar类中添加了100％的宽度。在那之前，使用4.1。在这个项目中，汽车先生并没有为我工作。

Answer 17

对于Bootstrap 4 beta，示例导航栏的元素与右侧对齐：

<div id="app" class="container">
  <nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
</div>

Answer 18

对于Bootstrap 4.3.1，我使用的是nav-pills，但对我来说没有任何作用：

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>

Answer 19

我正在运行Angular 4（v.4.0.0）和ng-bootstrap（Bootstrap 4）。这段代码不是所有相关的，但希望人们可以挑选和选择有效的代码。我花了一些时间找到一个解决方案来让我的项目合理，正确折叠并实现我的谷歌（使用OAuth）个人资料图片的下拉列表。

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>

Answer 20

在我的 Bootstrap v5 中，我只想要右侧的一组导航选项：

<块引用>

只需在 ul 中添加“ms-auto”即可。

它帮助了我。

<div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav ms-auto mb-2 mb-md-0">
      <li class="nav-item">
        <a class="nav-link " aria-current="page" href="index.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="services.php" tabindex="-1" aria-disabled="true">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="aboutus.php">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="Portfolio.php">Portfolio</a>
      </li>
    </ul>
    
  </div>

Answer 21

刚从已发布版本4的getbootstrap页面中复制了一个，这比上面的版本好得多

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div> 

Answer 22

在verndor-prefixes.less中找到69行，然后写下：

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

Answer 23

我是新的堆栈溢出和新的前端开发。这对我有用。所以我不希望显示列表项。

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }

<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>