在bootstrap 4 alpha 6中将navbar项向右对齐 [英] Align navbar item to the right in bootstrap 4 alpha 6

问题描述

如何将导航栏项目向右对齐？

How do I align a navbar item to right?

我想要登录并注册到右侧。
但我尝试的一切似乎无效。

I want to have the login and register to the right. But everything I try does not seem to work.

导航栏的图片

• < div> 周围的< ul> ： style =float：right


• < div> < ul> 与atribute： style =text-align：right


• 尝试了< li> 标签上的两项内容


• c>！important 已添加到结尾


• 更改了 nav-item
  
• 添加了下拉菜单中的< li> 类添加到< li>


• -content-end 类别< li>

• <div> around the <ul> with the atribute: style="float: right"
• <div> around the <ul> with the atribute: style="text-align: right"
• tried those two things on the <li> tags
• tried all those things again with !important added to the end
• changed nav-item to nav-right in the <li>
• added a pull-sm-right class to the <li>
• added a align-content-end class to the <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>

推荐答案

您可以使用新的

You can use the new mr-auto for a right margin after the left (first) nav...

<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

或者， ml-auto 可以在第二（右）导航栏上使用。

Alternatively, ml-auto could be used on the 2nd (right) navbar.

这篇关于在bootstrap 4 alpha 6中将navbar项向右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！