Bootstrap Navbar展开后不会崩溃

Question

我正在对旧的着陆页进行更新以使其具有响应性（全面检修将在今年晚些时候完成），我遇到的问题是，一旦单击以在移动视图（或在桌面视图中调整大小的窗口）中展开导航栏），即使再次在内部页面上正常运行，它也不会崩溃-它将相同的导航栏拖入可重复使用的位置。

这是登陆页面的CSS，我认为它与导航栏的切换冲突。 测试是在运行7.1的三星银河s5上进行的。

页面包装程序具有所有必需的Bootstrap CSS + JS，所以我知道并非如此。

我确实必须在导航栏上使用z索引，因为超大屏幕覆盖了切换按钮，因此在使用该切换之后，现在可以单击了，就不会关闭。

编辑 -对不起，忘记了添加指向页面的链接： http : //prairies-nwt.supportcbcf.com/site/PageNavigator/BABC_home.html

CSS：

@media (min-width:642px) and (max-width: 768px) {
    .jumbotron {
    background: url("http://convio.cancer.ca/BABC/2017/img/BABC_landingpage_banner.jpg") no-repeat center center; 
        background-size: contain;
        width: 100vw;
    height: 194px;
    position: relative;
    right: 2.2%;
    top: -40px;
        border-radius: 0px !important;
    }

    .closeGap {
    position: relative;
    right: 11% !important;
        margin-top: -70px;
    }

        .btn-default-width, .btn-default-width-winnipeg {
        width: 100vw;

        }

 }


@media (min-width: 320px) and (max-width: 640px) {
    .closeGap {
        position: relative;
        right: 15.5% !important;
                margin-top: -150px;
    }

    .btn-default-width, .btn-default-width-winnipeg {
        width: 100vw;
    }

    .addPad {
    padding-bottom: 20px;
    padding-left: 0px;
    }


}
@media (min-width:320px) and (max-width: 640px) {
    .jumbotron {
    background: url("http://convio.cancer.ca/BABC/2017/img/BABC_landingpage_banner.jpg") no-repeat center center; 
        background-size: contain;
        width: 100vw;
    height: 194px;
    position: relative;
    right: 4.7%;
    top: -77px;
        border-radius: 0px !important;
    }
 }

@media (min-width:320px) and (max-width: 640px) and (orientation: landscape) {
    .jumbotron {
    background: url("http://convio.cancer.ca/BABC/2017/img/BABC_landingpage_banner.jpg") no-repeat center center; 
        background-size: contain;
        width: 100vw;
    height: 194px;
    position: relative;
    right: 2.5%;
    top: -46px;
        border-radius: 0px !important;
    }

    .closeGap {
    position: relative;
    right: 11.5% !important;
        margin-top: -90px;
    }


 }

这是导航栏：

<div class="nav navbar-default">
    <div class="navbar-header">
        <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar">&nbsp;</span>
            <span class="icon-bar">&nbsp;</span>
            <span class="icon-bar">&nbsp;</span>
        </button>
    </div>
    <div id="main-nav" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li>
                <a href="http://www.cbcf.org/battingagainstbc"><img src="../assets/images/ico_home.png" alt="home" /></a>
            </li>
            <li><a href="http://www.cbcf.org/central/ContactUs/Pages/default.aspx">Contact Us</a></li>
            <li><a href="http://www.cbcf.org/central/AboutUsMain/Pages/default.aspx">About</a></li>
            <li><a href="DocServer/BABC-2017-Fundraising-Tips.pdf?docID=7676" target="_blank">Fundraising Ideas</a></li>
        </ul>
    </div>
</div>

任何建议将不胜感激，谢谢您的时间！

Answer 1

我应用了补丁，但没有提供立即的解决方案。 就我而言，这解决了问题：

@media screen and (max-width: 767px) {
  .navbar-collapse.collapse {
    display: inline;
  }
}

引导程序显示：无； 那里。 发生这种冲突的原因是引导程序会隐藏菜单，并在较小的屏幕上显示菜单。