自定义Navbar Bootstrap MVC 4（更窄的Navbar＆amp;品牌名称调整）

Question

我想以两种方式自定义导航栏：

** 1. **我希望品牌名称与标签的高度相同（＆＃34; Home＆＃34;，＆＃34; About＆＃34; etc＆＃39;），我要＆ ＃39;注意它们之间的大小不同，但我希望它们处于同一高度。

** 2. **我想让导航栏比现在更窄。

我还添加了一张图片，展示了我所谈论的内容（根据各部分提供的数字）

我怎样才能做到这一点？

谢谢

Answer 1

要在同一高度设置品牌名称和菜单项，您必须更改名为 padding 的参数。如果要缩小菜单栏，可以更改te min-height 参数。可以在 bootstrap.css 文件中更改这些参数。

平等菜单项

更改以下css类中的填充：

.navbar-brand {
    float: left;
    padding: 15px;
    font-size: 18px;
    line-height: 20px;
    height: 50px;
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}

缩小菜单栏

更改以下css类中的最小高度

.navbar {
    position: relative;
    z-index: 1000;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

有用链接编辑实时css：
  - Google chrome page inspector
  - Firefox page inspector
  - Firebug通用页面检查器 - ＆gt; getfirebug.com（不能发布超过2个链接）