Html 带有左对齐、居中或右对齐项目的 Bootstrap NavBar

Question

提问by Aliv

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?

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

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.

这是我到目前为止所尝试过的，它最终对齐，以便徽标 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>

Answer 1

回答by Zim

2019 Update

2019年更新

Bootstrap 4

引导程序 4

Now that Bootstrap 4 has flexbox, Navbar alignment is much easier. Here are updated examples for left, rightand centerin the Bootstrap 4 Navbar, and many other alignment scenariosdemonstrated here.

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

The flexbox, auto-margins, and orderingutility classes can be used to align Navbar content as needed. There are many things to consider including the order and alignment of Navbar items (brand, links, toggler) on both large screens and the mobile/collapsed views. Don't use the grid classes (row,col) for the Navbar.

该Flexbox的，自动的利润，并订购工具类，可以根据需要使用对齐导航栏的内容。有很多事情需要考虑，包括大屏幕和移动/折叠视图上导航栏项目（品牌、链接、切换器）的顺序和对齐方式。不要为 Navbar 使用网格类 (row,col)。

Here are various examples...

这里有各种例子...

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:

另一个带有中心链接和覆盖徽标图像的BS4 导航栏选项：

<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, these other Bootstrap 4 alignment scenarios:

或者，这些其他 Bootstrap 4 对齐方案：

brand left, dead center links, (empty right)

品牌左，死点链接，（空右）

brand and links center, icons left and right

品牌和链接中心，左右图标

More Bootstrap 4 examples:

更多 Bootstrap 4 示例：

toggler left on mobile, brand right
center brand and links on mobile
right align links on desktop, center links on mobile
left links & toggler, center brand, search right

移动设备上的切换器左侧，品牌右侧
 中心品牌和移动设备
 上的链接右侧对齐桌面上的链接，移动设备左侧链接上的中心
 链接和切换器，中心品牌，搜索右侧

Also see: Bootstrap 4 align navbar items to the right
Bootstrap 4 navbar right align with button that doesn't collapse on mobile
Center an element in Bootstrap 4 Navbar

另请参阅：Bootstrap 4 将导航栏项目与
 右侧对齐 Bootstrap 4 导航栏与不会在移动设备上折叠的按钮右对齐
 Bootstrap 4 Navbar 中的一个元素居中

Bootstrap 3

引导程序 3

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

选项 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;
}

http://bootply.com/98314(3.x)

Option 2- Left, center and right nav links:

选项 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%);
  }
}

http://www.bootply.com/SGYC6BWeBK

http://www.bootply.com/SGYC6BWebK

Option 3- Center both brand and links

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

.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

More examples:

更多例子：

Left brand, center links
Left toggler, center brand

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

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

对于 3.x 还请参见导航对齐：Bootstrap center navbar

Center Navbar in Bootstrap
Bootstrap 4 align navbar items to the right

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

Answer 2

回答by Jerold Joel

Bootstrap 4

引导程序 4

We have many ways to align navBars Items.

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

For Left Align

对于左对齐

class = "navbar-nav mr-auto"

For Right Align

对于右对齐

class = "navbar-nav ml-auto"

For Center Align

对于中心对齐

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>

Answer 3

回答by tomaszbak

I needed something similar (left, center and right aligned items), but with ability to mark centered items as active. What worked for me was:

我需要类似的东西（左对齐、居中对齐和右对齐的项目），但能够将居中的项目标记为活动的。对我有用的是：

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>

CSS:

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

Answer 4

回答by Jeremy Lynch

Bootstrap 4 (as of alpha 6)

Bootstrap 4（从 alpha 6 开始）

Navbars are built with flexbox! Instead of floats, you'll need flexbox and margin utilities.

导航栏是用 flexbox 构建的！您将需要 flexbox 和 margin 实用程序，而不是浮点数。

For Align Right use justify-content-endon the collapsediv:

对于divjustify-content-end上的Align Right 使用collapse：

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

Full example here: https://jsbin.com/kemawa/edit?output

完整示例：https: //jsbin.com/kemawa/edit?output

Answer 5

回答by Jonofthedead

Smack my head, just reread my answer and realized the OP was asking for two logo's one on the left one on the right with a center menu, not the other way around.

拍拍我的头，重新阅读我的答案，然后意识到 OP 要求两个徽标，一个在左侧，一个在右侧，带有中间菜单，而不是相反。

This can be accomplished strictly in the HTML by using Bootstrap's "navbar-right" and "navbar-left" for the logos and then "nav-justified" instead of "navbar-nav" for your UL. No addtional CSS needed (unless you want to put the navbar-collapse toggle in the center in the xs viewport, then you need to override a bit, but will leave that up to you).

这可以通过使用 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>

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

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

For those who got here trying to center the "brand" here is my old answer:

对于那些试图以“品牌”为中心的人来说，这是我的旧答案：

I know this thread is a little old, but just to post my findings when working on this. I decided to base my solution on skelly's answer since tomaszbak's breaks on collaspe. First I created my "navbar-center" and turned off float for the normal navbar in my CSS:

我知道这个线程有点旧，但只是在处理这个问题时发布我的发现。自从 tomaszbak 在 collaspe 上休息后，我决定将我的解决方案基于 skelly 的答案。首先，我创建了我的“导航栏中心”并在我的 CSS 中关闭了普通导航栏的浮动：

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

.navbar-brand{
   float:none;
}

However the issue with skelly's answer is if you have a really long brand name (or you wanted to use an image for your brand) then once you get to the the sm viewport there could be overlapping due to the absolute position and as the commenters have said, once you get to the xs viewport the toggle switch breaks (unless you use Z positioning but I really didn't want to have to worry about it).

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

So what I did was utilize the bootstrap responsive utilitiesto create multiple version of the brand block:

所以我所做的是利用引导响应实用程序来创建品牌块的多个版本：

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

So now the lg and md viewports have the brand centered with links to the left and right, once you get to the sm viewport your links drop to the next line so that you don't overlap with your brand, and then finally at the xs viewport the collaspe kicks in and you are able to use the toggle. You could take this a step further and modify the media queries for the navbar-right and navbar-left when used with navbar-brand so that in the sm viewport the links are all centered but didn't have the time to vet it out.

所以现在 lg 和 md 视口的品牌以左右链接为中心，一旦你进入 sm 视口，你的链接就会下降到下一行，这样你就不会与你的品牌重叠，最后在 xs collaspe 启动的视口，您可以使用切换。您可以更进一步，并在与 navbar-brand 一起使用时修改 navbar-right 和 navbar-left 的媒体查询，以便在 sm 视口中链接全部居中，但没有时间对其进行。

You can check my old bootply here: www.bootply.com/n3PXXropP3

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

I guess having 3 brands might be just as much hassle as the "z" but I feel like in the world of responsive design this solution fits my style better.

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

Answer 6

回答by Shawn

This is a dated question but I found an alternate solution to share right from the bootstrap github page. The documentation has not been updated and there are other questions on SO asking for the same solution albeit on slightly different questions. This solution is not specific to your case but as you can see the solution is the <div class="container">right after <nav class="navbar navbar-default navbar-fixed-top">but can also be replaced with <div class="container-fluid"as needed.

这是一个过时的问题，但我找到了一个替代解决方案，可以直接从 bootstrap github 页面分享。该文档尚未更新，并且还有其他关于 SO 的问题要求相同的解决方案，尽管问题略有不同。此解决方案并非特定于您的情况，但正如您所见，该解决方案<div class="container">紧随其后，<nav class="navbar navbar-default navbar-fixed-top">但也可以<div class="container-fluid"根据需要替换。

<!DOCTYPE html>
<html>

<head>
  <title>Navbar right padding broken </title>
  <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>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <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="...">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

The solution was found on a fiddle on this page: https://github.com/twbs/bootstrap/issues/18362

解决方案是在本页的小提琴上找到的：https: //github.com/twbs/bootstrap/issues/18362

and is listed as a won't fix in V3.

并且在 V3 中被列为无法修复。

Answer 7

回答by atreeon

I found the following was a better solution depending on the content of your left, center and right items. A width of 100% without a margin caused overlapping of divs and was preventing anchor tags to work correctly - that is without the messy use of z-indexes.

我发现以下是更好的解决方案，具体取决于左侧、中间和右侧项目的内容。没有边距的 100% 宽度会导致 div 重叠并阻止锚标记正常工作 - 即没有杂乱地使用 z 索引。

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}

Answer 8

回答by Nehil Koshiya

<div class="d-flex justify-content-start">hello</div>    
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

Put the fields that you want to center, right or left according above division.

根据上面的划分，将要居中、向右或向左的字段放置。

Answer 9

回答by Gerard

You set the margin left to auto -> ml-auto on the section you want to move to the right.

您在要向右移动的部分上将左边距设置为 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>

Answer 10

回答by parsecer

The simplest solution:

最简单的解决方法：

Just divide the navbarinto columns: for instance, if you have 24 columns over all, 12 are going to be empty and 12 are going to contrain the navbar:

只需将它们navbar分成几列：例如，如果总共有 24 列，则 12 列将是空的，而 12 列将限制导航栏：

<nav class="navbar navbar-default">
    <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>
</nav>

Html 带有左对齐、居中或右对齐项目的 Bootstrap NavBar

提问by Aliv

回答by Zim

Bootstrap 4

引导程序 4

Bootstrap 3

引导程序 3

回答by Jerold Joel

回答by tomaszbak

回答by Jeremy Lynch

Bootstrap 4 (as of alpha 6)

Bootstrap 4（从 alpha 6 开始）

回答by Jonofthedead

回答by Shawn

回答by atreeon

回答by Nehil Koshiya

回答by Gerard

回答by parsecer

相关推荐

最近更新

标签

Html 带有左对齐、居中或右对齐项目的 Bootstrap NavBar

提问by Aliv

回答by Zim

Bootstrap 4

引导程序 4

Bootstrap 3

引导程序 3

回答by Jerold Joel

回答by tomaszbak

回答by Jeremy Lynch

Bootstrap 4 (as of alpha 6)

Bootstrap 4（从 alpha 6 开始）

回答by Jonofthedead

回答by Shawn

回答by atreeon

回答by Nehil Koshiya

回答by Gerard

回答by parsecer

相关推荐

Html Bootstrap 4 在单击下拉列表时更改插入符号

Html 提交按钮上的 onclick 事件

Html 如何定位 CSS 网格布局中的特定列或行？

Html HTML5 画布转 PDF

相关推荐

最近更新

标签