具有左对齐、中间对齐或右对齐项目的Bootstrap导航条

在Bootstrap中，创建一个左边是Logo A、中间是菜单项、右边是Logo B的导航条，最有利于平台的方式是什么？

这是我到目前为止所尝试的，结果是Logo A在左边，Logo旁边的菜单项在左边，Logo B在右边。

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>
Zim
已编辑的问题 24日 八月 2018 в 3:43
编程
html css twitter-bootstrap bootstrap-4 navbar
1日 十一月 2013 в 6:54
37 种观点

2019年更新

Bootstrap 4

现在Bootstrap 4有了flexbox，Navbar的对齐方式就容易多了。这里有Bootstrap 4导航条中左、右和中心的更新实例，以及许多其他对齐方案在此演示。

可以根据需要使用flexbox、auto-margins和ordering实用类来对齐Navbar内容。有许多事情需要考虑，包括在大屏幕和移动/折叠视图上的导航栏项目（品牌、链接、切换器）的顺序和排列。不要为导航条使用网格类（row,col）。

这里有各种例子...

左边、中间（品牌）和右边的链接：

[！[在此输入图片描述][1]][1] 。


    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>

            <span class="navbar-toggler-icon"></span>

    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>

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


另一个BS4导航条选项，带有中心链接和覆盖标志图像。

[![中心链接和覆盖的标志图像][2]][2] 。


    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">

        </a>

            <span class="navbar-toggler-icon"></span>

    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>


或，这些其他的Bootstrap 4对齐方案。

品牌左边，死的中心链接，（空的右边）

Zim
编辑本段答案20日 五月 2019 в 9:53
评论(4)

我需要类似的东西（左、中、右对齐的项目），但要能将居中的项目标记为活动。对我来说有效的方法是

http://www.bootply.com/CSI2KcCoEM


  <div class="navbar-header">

      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
      <li class="navbar-right"><a href="#">Right 1</a></li>
      <li class="navbar-right"><a href="#">Right 2</a></li>
    </ul>
  </div>

CSS。

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}
评论(4)

ootstrap 4

我们有很多方法来对齐导航条项目。

为左对齐 [！[在此输入图像描述][1]][1]

class = "navbar-nav mr-auto"

用于右对齐 [！[在此输入图像描述][2]][2]

class = "navbar-nav ml-auto"

用于中心对齐 [！[在此输入图像描述][3]][3]

class = "navbar-nav mx-auto"


<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>

[1]: https://i.stack.imgur.com/elnmi.jpg [2]: https://i.stack.imgur.com/bV9JJ.jpg [3]: https://i.stack.imgur.com/5QtXz.jpg

Jerold Joel
编辑本段答案17日 七月 2019 в 4:46
评论(0)

Bootstrap 4 (截至alpha 6)

导航条是用flexbox构建的! 你需要使用flexbox和margin工具来代替浮动条。

为了向右对齐，在 "collapse "div上使用 "justify-content-end"。

<div class="collapse navbar-collapse justify-content-end">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
  </ul>
</div>

完整的例子在这里。 https://jsbin.com/kemawa/edit?output

Jeremy Lynch
编辑本段答案10日 一月 2017 в 1:39
评论(2)

咂咂嘴，刚刚重读了我的回答，发现上边要求的是两个logo'的一个在左边一个在右边，中间有一个菜单，而不是其他方式。

严格来说，可以在HTML中使用Bootstrap'的"navbar-right&quot来实现。 和"navbar-left" 的标志，然后用"nav-justified" 而不是"navbar-nav&quot。 为你的UL。 不需要额外的CSS（除非你想在xs视口中把navbar-collapse toggle放在中心位置，否则你需要覆盖一点，但这将由你决定）。


  <div class="navbar-header">

      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    <div class="navbar-brand navbar-left"><a href="#"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"></a></div>

  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
  </div>

Bootply。 http://www.bootply.com/W6uB8YfKxm

对于那些到了这里试图中心的"品牌&quot。 这里是我的老答案。

我知道这条线有点老了，但只是为了发布我在工作中的发现。 我决定以skelly'的答案为基础，因为tomaszbak'的断裂在崩溃。 首先我创建了我的"navbar-center&quot。 并在CSS中关闭了普通导航条的浮动功能。

.navbar-center
{
   position: absolute;
   width: 100%;
   left: 0;
   text-align: center;
   margin: auto;
}

.navbar-brand{
   float:none;
}

然而skelly'的答案的问题是，如果你有一个非常长的品牌名称（或者你想为你的品牌使用图像），那么一旦你到达sm视口，由于绝对位置可能会有重叠，正如评论者所说，一旦你到达xs视口，切换开关就会中断（除非你使用Z定位，但我真的不想担心它）。

所以我所做的是利用bootstrap响应式实用工具来创建多个版本的品牌块。


<div class="navbar-header">

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

  <div class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
  </ul>
</div>

</nav&gt。

所以现在lg和md视口的品牌居中，链接在左边和右边，一旦你到了sm视口，你的链接就会下降到下一行，这样你就不会和你的品牌重叠，然后最后在xs视口，折叠启动，你就可以使用切换。 你可以更进一步，修改navbar-right和navbar-left的媒体查询，当与navbar-brand一起使用时，这样在sm视口中的链接都是居中的，但没有时间去审核它。

你可以在这里查看我的旧引导程序。 www.bootply.com/n3PXXropP3

我想有3个品牌可能和"z&quot一样麻烦。 但我觉得在响应式设计的世界里，这个解决方案更适合我的风格。

Jonofthedead
编辑本段答案3日 四月 2015 в 2:22
评论(0)

这是个过时的问题，但我在bootstrap的github页面上找到了一个替代的解决方案。 文档还没有更新，而且在SO上还有其他问题在问同样的解决方案，尽管问题略有不同。 这个解决方案并不针对你的情况，但是你可以看到，这个解决方案是<div class="container">就在<nav class="navbar navbar-default navbar-fix-top">之后，但是也可以根据需要用<div class="container-fluid"替换。





  Navbar right padding broken 
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>





    <div class="container">
      <div class="navbar-header">

          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        <a href="#/" class="navbar-brand">Hello</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="btn-group navbar-btn" role="group" aria-label="...">
              Se connecter
              Créer un compte
            </div>
          </li>
        </ul>
      </div>
    </div>

解决办法是在这个页面的一个提琴上找到的。 https://github.com/twbs/bootstrap/issues/18362

并在V3中被列为不会't修复。

评论(0)

我发现，根据你的左、中、右项目的内容，以下是一个更好的解决方案。 没有边距的100%的宽度会造成DIV的重叠，并妨碍锚点标签的正常工作--这是在没有混乱的使用Z-indexes的情况下。

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}
评论(0)
<div class="d-flex justify-content-start">hello</div&gt。
<div class="d-flex justify-content-end">hello</div&gt。
<div class="d-flex justify-content-center">hello</div&gt。
<div class="d-flex justify-content-between">hello</div&gt。
<div class="d-flex justify-content-around">hello</div&gt。

根据上面的划分，把你想居中、居右、居左的字段放进去。

GROVER.
编辑本段答案8日 九月 2019 в 5:33
评论(0)

最简单的解决方案。

只要把导航条分成几列就可以了。 比如说，如果你有24列，那么12列是空的，12列是在导航条上。


    <div class="row">
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>

       <div class="col-sm-12">
           <ul class="nav navbar-nav" align="center">
              <li><a href="#">Home</a></li>
              <li><a href="#">First Link</a></li>
              <li><a href="#">Second Link</a></li>
              <li><a href="#">Third Link</a></li>
              <li><a href="#">Fourth Link</a></li>
           </ul>
       </div>
    </div>
评论(2)