材料设计：引导3响应导航栏

Question

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

我有我在本次修订挣扎了几个问题：

• 汉堡包图标是不是在左侧崩塌时
• 左侧和右侧之间的文本垂直间隙
• 品牌不居中

我的目标：

建议表示赞赏！

Answer 1

我写我自己的最小引导导航栏样式，其建立在引导变量的顶部。 /*材料的Navbar */

.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： 设置视口的断点到屏幕-SM-MAX https://jsfiddle.net/eo2gsxcm/2/

Answer 2

我已经改变了：

• 包括扩大离开navbar-header DIV中& rigt导航栏切换按钮和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 3

更新这样你的代码一起：Demo

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