Question

这是我到目前为止所做的：http://codepen.io/Pabi/pen/bdmgjm 这是我的CSS：

/*---------------------------------------------------
  3.1 Topbar
---------------------------------------------------*/

#section-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  overflow: visible;
  font: normal 16px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*  border-bottom: 2px solid;
  border-color: rgb(232,235,237);*/
}
/*Makes it so when you hover over the icon stays white*/

#section-topbar a {
  color: #fff;
}

#section-topbar ul#nav > li {
  display: block;
  padding: 0;
}

#section-topbar ul#nav a {
  display: block;
  font: normal 11px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  padding: 18px 20px 18px 20px;
}

#section-topbar ul#nav .menu-item-left a:hover {
  background: #222;
  text-decoration: none;
}

#section-topbar ul#nav .active a {
  background: #44bbaa;
}

#section-topbar ul#nav .active a:hover {
  background: #44bbaa;
}

#section-topbar i {
  font-size: 25px;
}
/*Center Brand on NavBar*/

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  margin: auto;
}

如何将导航栏的高度更改为更薄更可能的内容使下拉文本旁边的下拉图标而不是按钮。

非常感谢。

Answer 1

一种简单的方法是使用Sass或Less源并更改%f的默认值

关于这一点的好处是，顶部和底部边距的所有其他计算或导航栏元素的填充将根据新值自动调整。与尝试覆盖已编译的样式相比，它是一种更易于维护和清晰的解决方案。

关于制作下拉文本而不是按钮，请参阅导航栏中下拉列表的bootstrap文档中的示例http://getbootstrap.com/components/#default-navbar：

$navbar-height

您应该能够在<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li>元素内部执行非常类似的操作。

Answer 2

您可以使用图标周围较小的填充来缩小顶部栏的高度：

#section-topbar ul#nav a {
  ...
  padding: 10px 20px;
}

Bootstrap：如何更改导航栏的高度

2 个答案: