Bootstrap 4

Question

在 Bootstrap 中，创建左侧是徽标A的导航栏，中间的菜单项和右侧的徽标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>

Answer 1

2019年更新

Bootstrap 4

现在Bootstrap 4有了flexbox，Navbar对齐更加容易。以下是updated examples for left, right and center in the Bootstrap 4 Navbar和many other alignment scenarios demonstrated here。

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

以下是各种例子......

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

<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

另一个带有center links and overlay logo image的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>

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

brand left, dead center links, (empty right)

brand and links center, icons left and right

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

另见：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 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;
}

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

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

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

更多示例：

Left brand, center links
Left toggler, center brand

对于3.x，请参见nav-justified：Bootstrap center navbar

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

Answer 2

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

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：

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

Bootstrap 4（截至alpha 6）

Navbars是用flexbox构建的！而不是花车，你需要flexbox和margin实用程序。

对于Align Right justify-content-end div：

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

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

Answer 4

轻拍我的脑袋，重读我的回答并意识到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>

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

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

所以我所做的就是利用bootstrap responsive utilities来创建品牌块的多个版本：

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

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

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

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

Answer 5

引导程序4

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

对于左对齐 class =“ navbar-nav mr-auto ”

用于右对齐 class =“ navbar-nav ml-auto ”

对于居中对齐 class =“ navbar-nav mx-auto ”

<ComboBox x:Name="cmb" SelectedIndex="0" Margin="2" Width="100">
    <ComboBoxItem Tag="X">X</ComboBoxItem>
    <ComboBoxItem Tag="Y">Y</ComboBoxItem>
</ComboBox>

<Slider>
    <Slider.Style>
        <Style TargetType="Slider">
            <Setter Property="Value" Value="{Binding XValue}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding SelectedItem.Tag, ElementName=cmb}" Value="Y">
                    <Setter Property="Value" Value="{Binding YValue}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Slider.Style>
</Slider>

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

Answer 7

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

2021 年更新

引导程序 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>

Answer 8

我发现以下是一个更好的解决方案，具体取决于左，中，右项的内容。没有边距的100％宽度导致div重叠并且阻止锚标签正常工作 - 这没有使用z-index的混乱。

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

Answer 9

这是一个过时的问题，但我找到了另一个可以从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>

此页面上的小提琴找到了解决方案： https://github.com/twbs/bootstrap/issues/18362

并列为将无法在V3中修复。

Answer 10

这种方法对我有用：

.navbar,
.navbar-collapse {
    padding-right: 10%;
    padding-left: 10%;
}

.navbar-header{
    padding-left: 10%;
}

Answer 11

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

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

Answer 12

最简单的解决方案：

只需将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>

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

12 个答案:

Bootstrap 4

Bootstrap 3

Bootstrap 4（截至alpha 6）

引导程序 5.0.0 beta-1