Material 设计：Bootstrap 3 响应式导航栏

Question

当前代码：http://www.bootply.com/NuuxNSnmrf

我在这次修订中遇到了一些问题：

折叠时汉堡包图标不在左侧
左右文本之间的垂直间隙
品牌不居中

我的目标：

感谢建议！

Answer 1

我改变了什么：

在 navbar-header div 中包含扩展的左和右导航栏切换按钮，并在 left-navbar-menu 和 right-navbar-menu 无序列表中删除了容器 div元素。
在汉堡菜单上应用float:left
左导航栏和右导航栏列表项文本分别向左和向右对齐。
作为第三个虚拟搜索按钮包含在内。

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  color: #FFFFFF;
  margin: auto;
}
.navbar {
  background-color: #3F50B5;
  color: #FFFFFF;
}
a {
  color: #FFFFFF !important;
}
a:hover {
  color: #000000 !important;
}
.custom-navbar .hamburger-on-left {
  float: left;
}
.navbar-left li {
  text-align: left;
}
.navbar-right li {
  text-align: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-fixed-top custom-navbar" role="navigation">
  <div class="container-fluid">
    <!-- expanded behavior -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
      <!-- expanded left navbar-->
      <div class="navbar-left">
        <button type="button" class="navbar-toggle hamburger-on-left" data-toggle="collapse" data-target="#left-navbar-menu">
          <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="false"></span>
        </button>
      </div>

      <!-- expanded right navbar -->
      <div class="navbar-right">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#right-navbar-menu">
          <span class="glyphicon glyphicon-option-vertical" aria-hidden="false"></span>
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#">
          <span class="glyphicon glyphicon-search" aria-hidden="false"></span>
        </button>
      </div>
    </div>



    <!-- collapsed behavior -->
    <ul id="left-navbar-menu" class="nav navbar-nav navbar-left navbar-collapse collapse">
      <li><a href="#">Left</a>
      </li>
      <li><a href="#about">Left</a>
      </li>
    </ul>

    <ul id="right-navbar-menu" class="nav navbar-nav navbar-right navbar-collapse collapse">
      <li><a href="#about">Right</a>
      </li>
      <li><a href="#contact">Right</a>
      </li>
    </ul>

  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 2

像这样更新您的代码：Demo

.navbar-toggle {
    float: left;      
}        
.navbar-brand {
    display: block;
    float: none;        
    text-align: center;
}    
.navbar-nav > li > a {       
    padding-bottom: 3px;
    padding-top: 3px;
}

Answer 3

我写了我自己的最小 bootstrap 导航栏样式表，它建立在 Bootstrap 变量之上。 /* material 导航栏 */

.material-navbar {

  /*

  Hides normally visible elements

  important notes:
  @grid-float-breakpoint - point at which navbar becomes uncollapsed
  @grid-float-breakpoint-max - point at which the navbar begins collapsing

  */

  > * {
    width: 100%;
    flex: 1;
    list-style-type: none;
  }

  > .left {
    text-align: left;
  }

  > .center {
    text-align: center;
  }

  > .right {
    text-align: right;
  }

  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  margin: 0;

  /* collapsed */
  @media (max-width: @screen-sm-max) {
    display: none;
  }

  /* not collapsed */
  @media (min-width: (@screen-sm-max - 1px)) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

}

.material-navbar-collapsed {

  /*

  Shows normally visible elements

  important notes:
  @grid-float-breakpoint - point at which navbar becomes uncollapsed
  @grid-float-breakpoint-max - point at which the navbar begins collapsing

  */

  > * {
    width: 100%;
    flex: 1;
    list-style-type: none;
  }

  > .left {
    text-align: left;
  }

  > .center {
    text-align: center;
  }

  > .right {
    text-align: right;
  }

  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  margin: 0;

  /* collapsed */
  @media (max-width: @screen-sm-max) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* not collapsed */
  @media (min-width: (@screen-sm-max - 1px)) {
    display: none;
  }

}

示例： https://jsfiddle.net/eo2gsxcm/

更新 1：https://jsfiddle.net/eo2gsxcm/1/

更新 2：将视口断点设置为 screen-sm-max https://jsfiddle.net/eo2gsxcm/2/

Material 设计：Bootstrap 3 响应式导航栏

Material Design: Bootstrap 3 Responsive Navbar

css

user-interface

twitter-bootstrap

twitter-bootstrap-3

material-design