那些遇到过的问题

带有左,中或右对齐项目的Bootstrap NavBar

Ali*_*liv 364 html css navbar twitter-bootstrap bootstrap-4

在引导,什么是最平台友好的方式来创建一个导航栏,有徽标中的左边,在中心菜单项和标志B上的吧？

这是我到目前为止已经试过,它最终被对齐,使标志A是在左边,菜单项旁边的右边的左边和标志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>
Run Code Online (Sandbox Code Playgroud)

Zim*_*Zim 685

2018年更新

Bootstrap 4

现在Bootstrap 4有了flexbox,Navbar对齐就容易多了.以下是Bootstrap 4 Navbar中左,右和中心的更新示例,以及此处演示的许多其他对齐方案.

该Flexbox的,自动的利润,并订购工具类,可以根据需要使用对齐导航栏的内容.有许多事情要考虑,包括大屏幕和移动/折叠视图上Navbar项目(品牌,链接,切换器)的顺序和对齐方式.以下是几个例子......

左,中(品牌)和右链接:

在此输入图像描述

<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>
Run Code Online (Sandbox Code Playgroud)

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


另一个带有中心链接和叠加徽标图像的 BS4 Navbar选项:

中心链接和叠加徽标图像

<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>
Run Code Online (Sandbox Code Playgroud)


或者,品牌左,死中心链接,(空右)

Navbar品牌离开,死中心链接

或者,品牌和链接中心,左右图标

在此输入图像描述

或者,中心品牌和移动链接

另请参阅:Bootstrap 4将导航栏项目对齐到右侧

Bootstrap 3

选项1 - 品牌中心,左/右导航链接:

在此输入图像描述

<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;
}
Run Code Online (Sandbox Code Playgroud)

http://bootply.com/98314

选项2 - 左,中,右导航链接:

在此输入图像描述

<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%);
  }
}
Run Code Online (Sandbox Code Playgroud)

http://www.bootply.com/SGYC6BWeBK

选项3 - 以品牌和链接为中心

在此输入图像描述

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

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}
Run Code Online (Sandbox Code Playgroud)

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

更多例子:

左品牌,中心链接
左切换器,中心品牌

对于3.x也可以看到nav-justified:Bootstrap中心导航栏

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

  • 我创建了 2 个 jsfiddle 示例，因为 bootply 现在无法工作。[sol 1](https://jsfiddle.net/bxd202o7/) 和 [sol 2](https://jsfiddle.net/Ljec3ks4/1/)。顺便说一句，soluzion 2 效果更好（恕我直言） (2认同)
  • 这怎么没有标记为答案？为 BS 3 和 4 提供 3 个选项，谢谢先生。 (2认同)

tom*_*bak 36

我需要类似的东西(左,中,右对齐的项目),但能够将居中的项目标记为活动.对我有用的是:

http://www.bootply.com/CSI2KcCoEM

<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 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>
</nav>
Run Code Online (Sandbox Code Playgroud)

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;
  }
}
Run Code Online (Sandbox Code Playgroud)

Jer*_*oel 35

引导程序4

我们有很多方法来对齐navBars项目。

对于左对齐 在此处输入图片说明

class =“ navbar-nav mr-auto ”

对于右对齐 在此处输入图片说明

class =“ navbar-nav ml-auto ”

对于中心对齐 在此处输入图片说明

class =“ navbar-nav mx-auto ”

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<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>
</nav>
Run Code Online (Sandbox Code Playgroud)

Jer*_*nch 24

Bootstrap 4(截至alpha 6)

Navbars是用flexbox构建的!而不是浮动,你需要flexbox和margin实用程序.

对于右对齐使用justify-content-end的collapseDIV:

<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>
Run Code Online (Sandbox Code Playgroud)

这里有完整的例子:https://jsbin.com/kemawa/edit？output

  • 对我来说不起作用... justify-content-end似乎适用于nav并且似乎不适用于navbar是最新版本的bootstrap. (3认同)

小智 14

在 Bootstrap 5 中，类发生了变化，因此对于 ml-auto来说，它是随ms-auto变化的，而 mr-auto是随me-auto变化的

对于左我们必须使用s而不是l，对于右我们必须使用e而不是r

Jon*_*ead 11

轻拍我的脑袋,重读我的回答并意识到OP正在要求左边的两个标志一个带有中心菜单,而不是相反.

这可以通过使用Bootstrap的"navbar-right"和"navbar-left"用于徽标,然后使用"nav-justified"而不是"navbar-nav"为您的UL严格在HTML中完成.不需要额外的CSS(除非你想在xs视口的中心放置导航栏折叠切换,然后你需要覆盖一点,但会留给你).

<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 class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></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>
</nav>
Run Code Online (Sandbox Code Playgroud)

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

对于那些来这里试图集中"品牌"的人来说,这是我的老答案:

我知道这个帖子有点旧,但只是在处理这个问题时发表我的发现.自从tomaszbak在collaspe上休息后,我决定将我的解决方案建立在skelly的答案上.首先,我创建了我的"navbar-center"并关闭了我的CSS中普通导航栏的浮动:

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

.navbar-brand{
   float:none;
}
Run Code Online (Sandbox Code Playgroud)

然而,skelly回答的问题是如果你有一个很长的品牌名称(或者你想为你的品牌使用一个图像)那么一旦你到达sm视口,由于绝对位置和评论者有可能会有重叠说,一旦你到达xs视口,切换开关就会断开(除非你使用Z定位,但我真的不想担心它).

所以我所做的就是利用bootstrap 响应实用程序来创建品牌块的多个版本:

<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 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>
Run Code Online (Sandbox Code Playgroud)

所以现在lg和md视口的品牌集中了左右两侧的链接,一旦你到达sm视口,你的链接就会下降到下一行,这样你就不会与你的品牌重叠,最后是xs视口collaspe踢,你可以使用切换.您可以更进一步,当与navbar-brand一起使用时,修改navbar-right和navbar-left的媒体查询,以便在sm视口中链接全部居中,但没有时间审查它.

你可以在这里查看我的旧bootply:www.bootply.com/n3PXXropP3

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

小智 9

在 Bootstrap 5 中， ms-auto我可以将导航项向右移动

引导程序的代码是：

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

我将ul标签更改<ul class="navbar-nav">为<ul class="navbar-nav ms-auto mb-2 mb-lg-0">，它对我来说效果很好

编辑后我的代码是：

 <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
      <a class="navbar-brand nav-title" href="#">Cooking Master</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
Run Code Online (Sandbox Code Playgroud)

小智 6

您在要向右移动的部分上将左边距设置为 auto -> ml-auto。 

 <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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

rig*_*lip 5

这是 BS5 的更新和@Zim 答案的建议编辑。不幸的是，我无法提交编辑，因为编辑队列已满。一旦队列允许新的编辑，如果具有高声誉的用户可以提交编辑，那就太好了。

2021 更新

Bootstrap 5.0.0 beta-1

添加 RTL 支持，ml-auto并mr-auto变为ms-auto和me-auto（左/右开始/结束）。

Bootstrap 5 还要求导航栏包含在container div.

此代码生成与第一个 Bootstrap 4 示例等效的代码：

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

在此处输入图片说明

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
      <ul class="navbar-nav me-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 ms-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>
  </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

853977 次

最近记录：

6 年，3 月 前
Bootstrap 4将导航栏项目对齐到右侧 295
将一个元素置于Bootstrap 4 Navbar中 44
Bootstrap 4 导航栏与按钮右对齐，不会在移动设备上折叠 1
更多相关链接
相关归档
最小高度的父母内部的孩子:100%没有继承身高 137
班级名称"英雄"来自CSS？ 41
使用jQuery更改元标记动态 37
如何在没有href属性的链接中显示小手？ 20
网页中的电子签名 17
Angular-ui-router和href ='#' 12
如何使用asp.net web.sitemap和菜单控件与bootstrap 7
使用 NPM 安装 Bootstrap 5
如何从 react-bootstrap 导入多个组件？ 3
jQuery.load加载HTML文件 2
难疑归档
Python有一个字符串'contains'子串方法吗？ 3601
什么时候应该使用static_cast,dynamic_cast,const_cast和reinterpret_cast？ 2367
如何将Git托管项目中的所有本地更改还原到以前的状态？ 1830
什么是 ":-!!" 用C代码？ 1627
Java是否支持默认参数值？ 1569
在Vim中复制整行 1555
计算C#中的相对时间 1461
如何在Java中连接两个数组？ 1299
退出申请不赞成？ 1131
如何查看运行我的脚本的Python版本？ 1099