我正在对旧的目标网页进行更新以使其响应(全面检修将在今年晚些时候完成),我遇到的问题是,一旦您点击在移动视图中展开导航栏(或调整大小的窗口)在桌面视图中)它再次点击后不会崩溃 - 但它在内部页面上工作正常,它通过可重复使用的拉动相同的导航栏。
以下是我认为与导航栏切换冲突的着陆页的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"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </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>
任何建议都会非常感谢,感谢您的时间!
答案 0 :(得分:0)
我应用了补丁,但没有提供立即的解决方案。就我而言,这解决了问题:
@media screen and (max-width: 767px) {
.navbar-collapse.collapse {
display: inline;
}
}
引导程序显示:无;那里。发生这种冲突的原因是引导程序会隐藏菜单,并在较小的屏幕上显示菜单。