我有带按钮的bootstrap标题导航栏。我想要做的是添加只在移动设备和小屏幕上可见的按钮 - 手机/平板电脑。
这是标题
的结构# checkout out in X project branch and
git merge -s theirs master
我想让<header>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
<li><a href="">BUTTON 4</a></li>
</ul>
</div>
</nav>
</header>
仅在小屏幕上可见。
所以我按下这样的按钮：
BUTTON 4然后在css中添加
<li class="not_visible"><a href="">BUTTON 4</a></li>
但在每个屏幕分辨率上都可见。好像.not_visible {
display: none;
}
@media (max-width: 767px) {
.header{
text-align : center;
}
.not_visible {
display: inline;
}
.nav{
margin-top : 30px;
}
}
似乎不起作用。
答案 0 :(得分：0)
可能已经晚了，但是由于我注意到您正在使用引导程序，因此可以使用.d-block .d-sm-none作为类，以使其仅在xs-小型设备上可见。