扩展

Question

我正在对旧的目标网页进行更新以使其响应（全面检修将在今年晚些时候完成），我遇到的问题是，一旦您点击在移动视图中展开导航栏（或调整大小的窗口）在桌面视图中）它再次点击后不会崩溃 - 但它在内部页面上工作正常，它通过可重复使用的拉动相同的导航栏。

以下是我认为与导航栏切换冲突的着陆页的CSS。测试是在运行7.1的三星Galaxy s5上完成的。

页面包装器具有所有必需的bootstrap css + js所以我知道它不是那样。

我确实必须在导航栏上使用z-index，因为jumbotron覆盖了切换按钮，所以在使用之后切换现在可以点击，只是不会关闭。

编辑 - 抱歉忘记添加页面链接： 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;
  }
}

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