首页 文章

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

提问于
浏览 次
258

在 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>
html css twitter-bootstrap bootstrap-4 navbar

7 回答

  • 1

    2018 Update

    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项目（品牌，链接，切换器）的顺序和对齐方式 . 以下是几个例子......

    Left, center(brand) and right links:

    enter image description here

    <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选项：

    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)

    Navbar brand left, dead center links

    Or ，brand and links center, icons left and right

    enter image description here

    另见：Bootstrap 4 align navbar items to the right

    Bootstrap 3

    Option 1 - 品牌中心，左/右导航链接：

    enter image description here

    <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 - 左，中，右导航链接：

    enter image description here

    <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 - 以品牌和链接为中心

    enter image description here

    .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

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

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

    回复于
  • 1

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

    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;
  }
}
    回复于
  • 469

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

    .navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}
    回复于
  • 10

    最简单的解决方案：

    只需将 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>
    回复于
  • 11

    Bootstrap 4（截至alpha 6）

    Navbars使用flexbox构建！而不是浮动，你需要flexbox和margin实用程序 .

    对于Align Right，在 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

    回复于
  • -1

    轻拍我的脑袋，重新阅读我的答案，并意识到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上休息以来，我决定将我的解决方案 Build 在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”一样麻烦，但我觉得在响应式设计的世界里，这个解决方案更符合我的风格 .

    回复于
  • 32

    这是一个过时的问题，但我发现了一个可以从bootstrap github页面共享的替代解决方案 . 文档尚未更新，并且在SO上有其他问题要求相同的解决方案，尽管问题略有不同 . 此解决方案并非特定于您的情况，但正如您所看到的那样，解决方案是在 <nav class="navbar navbar-default navbar-fixed-top"> 之后的 <div class="container"> ，但也可以根据需要替换为 <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中不会修复的内容 .

    回复于

相关问题