Question

我有一个导航栏，这是非常标准的，我想让它更薄一些。

所以我尝试了这个：

http://www.bootply.com/9VC5N55nJD

但按钮仍然太大。点击下拉列表，您就会看到问题所在。有没有办法让导航栏在一个地方更薄？或者您是否需要为导航栏和按钮添加css以及可能出现的其他内容？

另外，如果我说它必须是30px的高度 - 在移动设备上，这可能太窄了，那么我需要针对不同尺寸的媒体查询吗？

Answer 1

Here是您代码的工作分支。

默认情况下，

Bootstrap 会为padding-top: 15px使用padding-bottom: 15px和.navbar-nav > li > a。以下CSS将解决此问题：

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

在缩小屏幕尺寸后（对于您提到的移动设备）运行媒体查询会重置它们，并使navbar更大一些就可以了。以下是 hacky 的方法：

@media (max-width: 768px) {
    // enter css for mobile devices here
    .topnav {
        font-size: 14px;
    }
    .navbar {
        min-height:50px;
        max-height: 50px;
    }
    .navbar-nav > li > a {
        padding-top:15px;
        padding-bottom:15px;
    }
}

Answer 2

使用以下css告诉我。

.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand {
float: left;
height: 40px;
line-height: 20px;
padding: 10px 15px;
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
margin-bottom: 0;
margin-right: 15px;
margin-top: 6px;
padding: 6px 5px;
position: relative;
}

Answer 3

您需要修复下拉列表的CSS。这是要添加到样式表的CSS：

ul.navbar-nav, ul.navbar-nav li {
  max-height: 40px;
  min-height: 40px;
}

像导航栏一样更改bootstraps格式很困难。它们设置了很多样式，很难找到你需要改变的样式。只需将上述样式添加到css表格中即可，您应该是肉汁。

修改

另外，如果您要将height: 40px和min-height设置为相同的值，为什么不使用max-height？

Bootstrap Navbar减少高度

3 个答案: