Bootstrap NavBar带有左对齐，中对齐或右对齐的项目 [英] Bootstrap NavBar with left, center or right aligned items

问题描述

在引导程序中，创建导航栏的平台最友好的方式是什么？左侧是徽标A，中间是菜单项，右侧是徽标B？

这是我到目前为止所尝试的，并且最终被对齐，以便Logo A位于左侧，左侧的徽标旁边的菜单项和标志B在右侧。

 < div class =navbar navbar-fixed-top navbar-custom> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =＃>< span class =navbar-logo> Logo_A< / span>< / a> 
< / div> 
< div class =collapse navbar-collapse> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>主页< / a>< / li> 
< li>< a href =＃about>选单项目1< / a>< / li> 
< li>< a href =＃contact>菜单项2< / a>< / li> 
< li>< a href =＃about>菜单项目3< / a>< / li> 
< / ul> 
< ul class =nav navbar-nav navbar-right> 
< li>< a href =＃>< img src =images / Logo_B.pngclass =img-responsive>< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
  

解决方案

2018年更新 b

Bootstrap 4

现在BS 4有flexbox ，对齐更容易。以下是

另一个带有

---

另请参阅：

 < nav class =navbar navbar-defaultrole =navigation> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< / div> 
< a class =navbar-brandhref =＃>品牌< / a> 
< div class =navbar-collapse collapse> 
< ul class =nav navbar-nav navbar-left> 
< li>< a href =＃>向左< / a>< / li> 
< li>< a href =＃about> Left< / a>< / li> 
< / ul> 
< ul class =nav navbar-nav navbar-right> 
< li>< a href =＃about>右< / a>< / li> 
< li>< a href =＃contact>右< / a>< / li> 
< / ul> 
< / div> 
< / nav> 
 
 .navbar-brand 
 {
 position：absolute; 
宽度：100％; 
剩下：0; 
 text-align：center; 
 margin：0 auto; 
} 
 .navbar-toggle {
 z-index：3; 
} 
  

 < nav class =navbar navbar-defaultrole =navigation> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< / div> 
< div class =navbar-collapse collapse> 
< ul class =nav navbar-nav> 
< li>< a href =＃>向左< / a>< / li> 
< / ul> 
< ul class =nav navbar-nav navbar-center> 
< li>< a href =＃>中心< / a>< / li> 
< li>< a href =＃>中心< / a>< / li> 
< li>< a href =＃>中心< / a>< / li> 
< / ul> 
< ul class =nav navbar-nav navbar-right> 
< li>< a href =＃>右< / a>< / li> 
< / ul> 
< / div> 
< / nav> 
 
 @media（min-width：768px）{
 .navbar-nav.navbar-center {
 position：absolute; 
剩下：50％; 
 transform：translatex（-50％）; 
} 
} 
  

http://www.bootply.com/SGYC6BWeBK

选项3 - 将品牌和链接集中在一起

< img src =https://i.stack.imgur.com/llVyZ.pngalt =在这里输入图片描述>

  .navbar .navbar-header，
 .navbar-collapse {
 float：none; 
 display：inline-block; 
 vertical-align：top; 
} 
 
 @media（max-width：768px）{
 .navbar-collapse {
 display：block; 
} 
} 
  

http://www.codeply.com/go/1lrdvNH9GI

< a href =https://www.codeply.com/go/Iyz6G8vOzL =noreferrer>左侧品牌，中心链接

对于3.x，请参阅导航对齐： Bootstrap中心导航栏

---

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right?

Here is what I've tried so far, and it ends up being aligned so that Logo A is on the left, menu items next to the logo on the left and Logo B on the right.

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

解决方案

2018 Update

Bootstrap 4

Now that BS 4 has flexbox, alignment is much easier. Here are updated examples for left, right and center in the Bootstrap 4 Navbar, and many other alignment scenarios demonstrated here.

Left, center(brand) and right links:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <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>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </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>
</nav>

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

Another BS4 Navbar option with center links and overlay logo image:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <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="#">
            <img src="//placehold.it/120/ccff00" class="rounded-circle">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </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>
</nav>

Or, brand left, dead center links, (empty right)

---

Also see: Bootstrap 4 align navbar items to the right

---

Bootstrap 3

Option 1 - Brand center, with left/right nav links:

<nav class="navbar navbar-default" role="navigation">
  <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>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <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>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

http://bootply.com/98314

---

Option 2 - Left, center and right nav links:

<nav class="navbar navbar-default" role="navigation">
  <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>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Center</a></li>
        <li><a href="#">Center</a></li>
      <li><a href="#">Center</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

http://www.bootply.com/SGYC6BWeBK

Option 3 - Center both brand and links

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://www.codeply.com/go/1lrdvNH9GI

Left brand, center links

For 3.x also see nav-justified: Bootstrap center navbar

---

这篇关于Bootstrap NavBar带有左对齐，中对齐或右对齐的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！