Bootstrap v3.3.2 导航栏断点答案

【问题标题】：Bootstrap v3.3.2 Nav Bar BreakpointBootstrap v3.3.2 导航栏断点
【发布时间】：2015-04-16 08:32:10
【问题描述】：

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

测试链接在这里——

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

我想要什么都有，除了 iPad 平板电脑肖像覆盖媒体点 768 像素到 991 像素。

我已复制 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 有点乱，对此深表歉意！

任何想法我如何修复它，因为它几乎就在那里！

谢谢，

戴夫。

【问题讨论】：

嗨，你能为此设置工作的 JSFIDDLE。所以我更容易复制。谢谢。
嗨，Kushal，是的，我会准备一些东西，完成后我会给你发一条推文，谢谢。

标签： html css twitter-bootstrap navigation

【解决方案1】：

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

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

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

下面引用的是相同的comment 供您参考。请参考它，您可能还需要访问Bootstrap的customize and download页面！

如果您想要 768 像素 (screen-sm-min) 的折叠导航栏，那么您不需要自定义任何内容，因为默认导航栏会在 Bootstrap 中以 768px 折叠。

但是当然如果你需要它以 992px (screen-md-min) 折叠，您可以更改“@grid-float-breakpoint”的值 “@screen-sm-min”。以同样的方式，您可以为“@screen-lg-min”或 “@screen-xs-min”。

谢谢。

希望你能从中找到解决办法。

谢谢。

【讨论】：