Bootstrap v3.3.2导航栏断点

Question

我是一个Bootstrap新手，我只是在网站上整理布局，包括响应设置。

测试链接在这里–

http://www.leedsinkcartridges.co.uk/testrs/index.html

我拥有我想要的一切，除了在iPad平板电脑人像中覆盖媒体点768px到991px。

我已经复制了Bootly CSS来调整这里讨论的媒体查询断点-bootply.com/105174

在我的styles.css文件的底部尝试这个代码，它显示了汉堡菜单，但它将我的导航栏显示为一个栏，而不是堆栈-

@media (min-width: 768px) and (max-width:991px)
{
site-navigation
{
position: absolute;
top: 50%;
right: 20px;
transform: translate(0, -50%);
-webkit-transform: translateY(-50%);
}
.nav-invert .site-navigation
{
left: 20px;
right: 0;
}
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}

}

文件的Dropbox链接在这里-

https://www.dropbox.com/s/cxn91itr8ek2d9k/ipad_portrait.zip?dl=0

Bootstrap CSS版本为v3.3.2

该网站的CSS目前有点乱，所以很抱歉！

你知道我该怎么修吗，因为它就快到了！

谢谢，

戴夫。

Answer 1

作为最佳实践的一部分，我不希望您在项目中获取某人的CSS。

除此之外，您还可以按照帖子中提到的所有3种方法进行操作。

此外，我还在同一篇文章中添加了一条评论，这正是你问题的确切解决方案。此解决方案不需要任何CSS更改。

下面引用的是相同的评论供您参考。请参阅，您可能还需要访问Bootstrap的自定义和下载页面！

如果你想要768px的折叠导航栏(屏幕sm分钟)，那么你不需要自定义任何东西，因为默认导航栏将在引导区中以768px崩溃。

但当然，如果你需要它在992px(屏幕md分钟)时折叠，可以使用更改"@gridfloat断点"的值"@screen sm min"。以同样的方式，您可以为"@screen lg min"或"@screen xs min"。

谢谢。

希望您能从中找到解决方案。

谢谢。