Bootstrap响应式菜单 - 如何更改较大视口的高度

Question

感谢您花时间阅读本文并可能帮助我。我是响应式布局的新手，这是我第一次尝试自定义我在StartBootstrap http://startbootstrap.com/template-overviews/modern-business/中使用的Bootstrap模板。

这是我正在处理的页面： http://www.designbyantony.com/JMP%20Bootstrap/contentpage.html

我无法增加菜单栏的高度，这应该看起来像这个艺术品截图 - 即：目前缺少一半徽标。当菜单折叠并且切换器被激活时会出现，但即使在那里，也会出现重叠并且看起来很混乱 - 但至少它位于菜单项上方的正确位置。我估计菜单栏在桌面上查看时可能需要大约100px高，在移动尺寸下降到大约70px（徽标缩小以适应它）。

我提前为不使用SASS或LESS道歉，但我最初尝试使用我自己的custom.css文件一次做一件事来覆盖bootstrap.css组件。

真的希望有人可以帮助一个完整的新手。

安东尼 英国

Answer 1

试试这个：

.navbar {  
    min-height: 115px;
}

你的bootstrap css规则有一个min-width属性我们只是增加了。

你应该创建一个新的css文件并在你的bootstrap下链接到它并覆盖你的风格。

你应该发布有问题的部分代码，而不是链接图像。

Answer 2

这里有两个主要方面需要解决。

第一个是min-height类的.navbar属性。目前它设置为50px。把它归结为115px或任何适合你的东西。页面较小且导航崩溃时使用此设置。您会注意到调整这不会使您的导航元素垂直居中。这将我们带到您需要调整的第二个区域。

.navbar {
     min-height: 115px;
}

第二个区域是<a>中ul的锚元素.navbar-nav上的填充，类为.navbar-nav > li > a。它们以此选择器padding-top为目标。此选择器位于两个位置，其中一个位于媒体查询中。媒体查询中的那个是您要调整的那个。将padding-bottom和45px值调整为@media (min-width: 768px) { .navbar-nav { padding-top: 45px; padding-bottom: 45px; } } 。

.navbar

我相信Twitter Bootstrap已经确保锚元素的总高度，行高和填充与{{1}}中的最小高度值相同。所以你可能也想这样做。