logo标签列表

Bootstrap如何将导航栏项目右对齐

csstwitter-bootstrapbootstrap-4flexboxbootstrap-5
478

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

我想将登录和注册放在右侧。 但是我尝试的所有方法似乎都不起作用。

Picture of Navbar

我尝试过的方法：

  • 在<ul>外添加带有属性style="float: right"的<div>
  • 在<ul>外添加带有属性style="text-align: right"的<div>
  • 在<li>标签上尝试这两种方法
  • 在所有这些方法后面加上!important
  • 将<li>中的nav-item更改为nav-right
  • 在<li>中添加一个pull-sm-right类
  • 在<li>中添加一个align-content-end类

这是我的代码：

<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>
1
导航栏从Alpha 6版本开始使用flexbox构建。 - max
2
是的，那么我该怎么做才能使它右对齐呢？ 我已经尝试了一些 flexbox 的方法，但都没有成功。 :/ - Luuk Wuijster
24个回答
0

  • 但是你想要右对齐的导航项目在独立标签中

  • 将其放置在主导航栏的 之外，但是在同一层级内，像这样：

    <ul class="navbar-nav justify-content-end ms-auto">
   <li class="nav-item">
     <a class="nav-link" href="#" aria-expanded="false">联系支持</a>
   </li>

   <li class="nav-item ">
     <a class="nav-link" href="#" aria-expanded="false">登录</a>
   </li>
</ul>

使用 justify-content-end ms-auto

-1
在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);
}

-2

这是从其中一个getbootstrap 4发布版本的页面中复制过来的，比上面的工作效果要好得多。

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

我是新来的Stack Overflow用户，也是前端开发的新手。这是对我有效的方法。因此，我不想显示列表项。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接