我希望在屏幕小于1339像素时从div中删除.btn-group，以便在较小的屏幕上不会影响布局。我正在使用bootstrap v3。
我喜欢使用navbar for＆lt; 1339px的布局感觉，所以我想在这些视口中删除分割按钮。但是，我希望将它们保留为＆gt; 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');
}
});
答案 0 :(得分：1)
你可以用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');
}
});
我让它添加了一个类＆＃34; backup-btn-group＆＃34;因此，如果窗口大于1340，它将替换原始类，但您可以将其保存在var
中答案 1 :(得分：0)
$(window).on("load resize", function() {
if($(window).width < 1340){
$('.btn-group').hide();
}
else{
$('.btn-group').show();
}
});
您应该使用CSS隐藏.btn-group窗口宽度小于1340。所以它不会在负载上显示。