Question

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

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

汉堡包图标在崩溃时不在左侧
左右文字之间的垂直间隙
品牌不集中

我的目标：

建议赞赏！

Answer 1

与您的代码一起更新： 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 2

我编写了自己的最小bootstrap navbar样式表，它建立在Bootstrap变量之上。 / * material 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：将视口断点设置为screen-sm-max https://jsfiddle.net/eo2gsxcm/2/

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

2 个答案: