html - Bootstrap v3.3.2 导航栏断点

Question

我是一个 Bootstrap 新手，我只是在网站上对布局进行排序，包括响应式设置。

测试链接在这里——

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

除了 iPad Tablet Portrait 覆盖媒体点 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。

除此之外，您可以遵循 post 中提到的所有 3 种方法。 .

此外，我还添加了一个comment同样article这就是您问题的确切解决方案。此解决方案不需要任何 CSS 更改。

下引同comment供你引用。请引用，您可能还需要访问customize and download Bootstrap 页面!

If you want collapsed navbar at 768px (screen-sm-min) then you don't need to customize anything because by default navbar will collapse at 768px in Bootstrap.

But of course if you need it to be collapsed at 992px (screen-md-min), you can change value for "@grid-float-breakpoint" with "@screen-sm-min". In same way you can do for "@screen-lg-min" or "@screen-xs-min".

Thanks.

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

谢谢。