Css 引导响应菜单-如何更改较大视口的高度

感谢您花时间阅读本文，并可能帮助我。我对响应式布局还不熟悉，这是我第一次尝试从StartBootstrap定制一个引导模板

这是我正在处理的页面：

我在增加菜单栏的高度时遇到了问题，该菜单栏看起来应该像这幅艺术作品截图——即：目前缺少一半的徽标。当菜单折叠和切换被激活时，它确实会出现，但即使在那里，也有重叠，看起来很凌乱——但至少它位于菜单项上方的正确位置。我估计，当在台式机上观看时，菜单栏的高度可能需要在100像素左右，而当徽标缩小到70像素左右时，才能适合移动设备的尺寸

我为没有使用SASS或更少而提前表示歉意，但我正在尝试一次只做一件事，首先使用我自己的custom.css文件覆盖bootstrap.css组件

真的希望有人能在这方面帮助一个完全的新手

安东尼 英国

试试这个：

.navbar {  
    min-height: 115px;
}

你的引导css规则有一个最小宽度属性，我们只是增加它

您应该创建一个新的css文件，并在引导下链接到它，然后覆盖您的样式

---

你应该发布你的代码，而不是链接图片

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

第一个是.navbar类的最小高度属性。目前它被设置为50px。把它提高到115像素或者任何适合你的东西。当页面变小且导航折叠时使用此设置。您会注意到，调整此选项不会使导航元素垂直居中。这就引出了你需要调整的第二个方面

navbar先生{ 最小高度：115px； } 第二个区域是uls中锚元素的填充，其类为.navbar nav。它们是此选择器的目标。导航栏nav>li>a。此选择器位于两个位置，其中一个位于媒体查询中。媒体查询中的是您要调整的。将padding top和padding bottom的值调整为45px

@介质最小宽度：768px{ .导航栏导航{ 填充顶部：45px； 填充底部：45px； } }

---

我相信TwitterBootstrap已经确保锚元素的总高度、行高加上填充与.navbar中的最小高度值相同。所以你可能也想这么做。

这是我希望它看起来如何的屏幕截图谢谢你hungerstar-我会试试这个，然后回来报告。AntonyHi hungerstar-我试过了，效果非常好-非常感谢。我想知道我是否可以询问如何解决菜单项与768和992视口大小之间的徽标重叠的问题-我想知道我是否应该确保菜单切换显示在992，而不是等待veiwport下降到768？嗯-说实话，我不知道该怎么做。我想我已经成功做到了：@media最小宽度：768px，最大宽度：991px{.navbar-collapse.collapse{display:none！important；}.navbar-collapse.in{display:block！important；}.navbar header.collapse，.navbar toggle{display:block！important；}.navbar头{float:none；}}一个选项是早晚显示菜单切换，另一个选项是调整.navbar nav ULs中锚元素的填充、字体大小等。我还注意到您的徽标没有完全居中，原因是-80px的负边距仅说明了图像的大小，而不是.nav的填充bar brand元素。它是-15px。Hi hungerstar-感谢居中的提示-我想我已经修复了它。我想我可能需要按照您的建议调整.navbar nav ULs，因为在低于992px的地方出现了一个问题，nav崩溃。当点击切换按钮时，菜单将在下面的一行中显示。明天的任务-感谢您的支持我们的帮助-我真的很感激。谢谢安东尼奥-我会尝试一下，然后再报告。安东尼奥-谢谢你花时间阅读我的问题并回答。安东尼诺问题。如果答案在任何方面或形式上都有帮助，请确保给它一个更高的分数安东尼奥-我会的，但恐怕我不能，评分只有12分：-/