Bootstrap 响应式菜单 - 如何更改较大视口的高度
Bootstrap responsive menu - How to change height for larger viewports
感谢您抽出宝贵时间阅读本文并可能帮助我。我是响应式布局的新手，这是我第一次尝试自定义我从 StartBootstrap http://startbootstrap.com/template-overviews/modern-business/.
使用的 Bootstrap 模板
这是我正在处理的页面：
http://www.designbyantony.com/JMP%20Bootstrap/contentpage.html
我在增加菜单栏的高度时遇到了问题，它应该看起来像这张艺术截图 - 即：一半的徽标目前丢失了。当菜单折叠并且切换被激活时它确实出现，但即使在那里，也有重叠并且看起来很乱 - 但至少它位于菜单项上方的正确位置。我认为在桌面上查看时，菜单栏可能需要大约 100 像素高，而在移动尺寸下则下降到大约 70 像素（徽标缩小以适合它）。
我提前为没有使用 SASS 或 LESS 道歉，但我试图一次做一件事，最初是使用我自己的 custom.css 文件覆盖 bootstrap.css 组件因为我需要。
真的希望有人能帮助一个完全的新手。
安东尼
英国
试试这个：
.navbar {
min-height: 115px;
}
您的 bootstrap css 规则有一个 min-width 属性 我们只是增加了它。
您应该在 bootstrap 下创建一个新的 css 文件并 link 并覆盖您的样式。
你真的应该 post 你的代码有问题的部分而不是 link 图片。
这里有两个主要方面您必须解决。
第一个是min-height属性为.navbarclass。当前设置为 50px。将其提高到 115px 或任何适合您的值。当页面较小且导航折叠时使用此设置。您会注意到调整它不会使您的导航元素垂直居中。这将我们带到了您需要调整的第二个区域。
.navbar {
min-height: 115px;
}
第二个区域是 ul 中锚元素 <a> 与 .navbar-nav 的 class 的填充。他们是这个选择器 .navbar-nav > li > a 的目标。这个选择器在两个地方，其中之一在媒体查询中。媒体查询中的那个就是你要调整的那一个。将 padding-top 和 padding-bottom 值调整为 45px.
@media (min-width: 768px) {
.navbar-nav {
padding-top: 45px;
padding-bottom: 45px;
}
}
我相信 Twitter Bootstrap 已经确保锚元素的总高度，line-height 加上 padding 与 .navbar 中的 min-height 值相同。所以你可能想做同样的事情。
感谢您抽出宝贵时间阅读本文并可能帮助我。我是响应式布局的新手，这是我第一次尝试自定义我从 StartBootstrap http://startbootstrap.com/template-overviews/modern-business/.
使用的 Bootstrap 模板这是我正在处理的页面： http://www.designbyantony.com/JMP%20Bootstrap/contentpage.html
我在增加菜单栏的高度时遇到了问题，它应该看起来像这张艺术截图 - 即：一半的徽标目前丢失了。当菜单折叠并且切换被激活时它确实出现，但即使在那里，也有重叠并且看起来很乱 - 但至少它位于菜单项上方的正确位置。我认为在桌面上查看时，菜单栏可能需要大约 100 像素高，而在移动尺寸下则下降到大约 70 像素（徽标缩小以适合它）。
我提前为没有使用 SASS 或 LESS 道歉，但我试图一次做一件事，最初是使用我自己的 custom.css 文件覆盖 bootstrap.css 组件因为我需要。
真的希望有人能帮助一个完全的新手。
安东尼 英国
试试这个：
.navbar {
min-height: 115px;
}
您的 bootstrap css 规则有一个 min-width 属性 我们只是增加了它。
您应该在 bootstrap 下创建一个新的 css 文件并 link 并覆盖您的样式。
你真的应该 post 你的代码有问题的部分而不是 link 图片。
这里有两个主要方面您必须解决。
第一个是min-height属性为.navbarclass。当前设置为 50px。将其提高到 115px 或任何适合您的值。当页面较小且导航折叠时使用此设置。您会注意到调整它不会使您的导航元素垂直居中。这将我们带到了您需要调整的第二个区域。
.navbar {
min-height: 115px;
}
第二个区域是 ul 中锚元素 <a> 与 .navbar-nav 的 class 的填充。他们是这个选择器 .navbar-nav > li > a 的目标。这个选择器在两个地方，其中之一在媒体查询中。媒体查询中的那个就是你要调整的那一个。将 padding-top 和 padding-bottom 值调整为 45px.
@media (min-width: 768px) {
.navbar-nav {
padding-top: 45px;
padding-bottom: 45px;
}
}
我相信 Twitter Bootstrap 已经确保锚元素的总高度，line-height 加上 padding 与 .navbar 中的 min-height 值相同。所以你可能想做同样的事情。