我想在屏幕小于 1339 像素时从 div 中删除 .btn-group，这样布局就不会在较小的屏幕上受到影响。我正在使用 Bootstrap v3。
我喜欢只使用 <1339px 的导航栏的布局感觉，所以我想删除那些视口(viewport)中的拆分按钮。但是我想保留它们 >1340。我希望它看起来像 https://youtu.be/qpWlaOeGZ_4?t=10m38s .
我不太确定从哪里开始或如何开始。我看过其他线程的几个答案，但它们似乎不起作用。
<header class="page-header">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Mommy Info</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<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 class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<div class="btn-group">
<a class="btn navbar-btn">Home</a>
<a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="splash"> <a href="#">Home</a></li>
<li><a href="#">B</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</li> <!--home-->
<li>
<div class="btn-group">
<a class="btn navbar-btn">Preg</a>
<a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="splash"> <a href="#">Preg</a></li>
<li><a href="#">ttc</a></li>
<li><a href="#">fd</a></li>
<li><a href="#">gp</a></li>
<li><a href="#">lad</a></li>
</ul>
</div>
</li> <!--preg-->
<li>
<div class="btn-group">
<a class="btn navbar-btn">aab</a>
<a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">advice</a></li>
<li><a href="#">guidelines</a></li>
<li><a href="#">milestones</a></li>
<li><a href="#">ld</a></li>
</ul>
</div>
</li> <!--aab-->
<li>
<div class="btn-group">
<a class="btn navbar-btn">han</a>
<a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">B</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</li><!--han -->
<li>
<div class="btn-group">
<a class="btn navbar-btn">MM</a>
<a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">B</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</li> <!-- pm-->
<li>
<div class="btn-group">
<a class="btn navbar-btn">MM</a>
<a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">B</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</li> <!-- mm-->
<li>
<div class="btn-group">
<a class="btn navbar-btn">S</a>
<a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">HB</a></li>
<li><a href="#">DB</a></li>
<li><a href="#">CS</a></li>
<li><a href="#">BG</a></li>
</ul>
</div>
</li> <!--s-->
<li>
<div class="btn-group">
<a class="btn navbar-btn">R</a>
<a data-toggle="dropdown" class="btn navbar-btn dropdown-toggle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">RGames</a></li>
<li><a href="#">Rgear</a></li>
<li><a href="#">Rlearn</a></li>
</ul>
</div>
</li> <!--r-->
<li>
<div class="btn-group">
<a href="#" class="btn navbar-btn">B</a>
</div>
</li> <!--b -->
</ul>
</div>
</div>
</div>
</header>
https://jsfiddle.net/ethacker/L9dzjxpg/
回答:
$(document).ready(function(){
if(window.innerWidth < 1340){
$('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
$('.btn').addClass('backup-btn').removeClass('btn');
$('.mybtn').addClass('dropdown-toggle').attr("data-toggle", "dropdown");
$('.myanchor').addClass('anchor');
}
});
$(window).resize(function(){
if(window.innerWidth < 1340){
$('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
$('.btn').addClass('backup-btn').removeClass('btn');
$('.mybtn').addClass('dropdown-toggle').attr("data-toggle", "dropdown");
$('.myanchor').addClass('anchor');
}else{
$('.backup-btn-group').addClass('btn-group').removeClass('backup-btn-group');
$('.backup-btn').addClass('btn').removeClass('backup-btn');
$('.mybtn').removeClass('dropdown-toggle').removeAttribute("data-toggle");
$('.myanchor').removeClass('anchor');
}
});
最佳答案
你可以用 jquery 做到这一点
$(document).ready(function(){
if(window.innerWidth < 1340){
$('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
}
});
$(window).resize(function(){
if(window.innerWidth < 1340){
$('.btn-group').addClass('backup-btn-group').removeClass('btn-group');
}else{
$('.backup-btn-group').addClass('btn-group').removeClass('backup-btn-group');
}
});
我让它添加了一个类“backup-btn-group”，所以如果窗口变得大于 1340，它会替换原来的类，但是你可以这样做，将它保存在一个 var 中
关于jquery - 仅根据屏幕尺寸删除类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43666655/