[英]bootstrap hide on small screens not working?
我不知道问题是否是因为我的浏览器，它应该可以工作，只是我希望第一个药丸标签隐藏在小屏幕上并在中型和大屏幕上可见，而第二个药丸标签是在小屏幕上可见，在大屏幕和更大的屏幕上隐藏。
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <div class="col-2 d-sm-none d-md-block"> <div class="nav flex-column list-group" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="list-group-item list-group-item-action active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">small no</a> <a class="list-group-item list-group-item-action" id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a> <a class="list-group-item list-group-item-action" id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a> <a class="list-group-item list-group-item-action" id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a> </div> </div> <div class="col-12 d-sm-block d-md-none"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">All</a> </li> <li class="nav-item"> <a class="nav-link " id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a> </li> <li class="nav-item"> <a class="nav-link " id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a> </li> <li class="nav-item"> <a class="nav-link " id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a> </li> </ul> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
Bootstrap 的这些实用程序类的工作方式是将样式应用于指定的宽度和向上。 因此，通过应用d-sm-none ，您将样式display:none分配给 sm-width 及以上的元素。 要从最小断点开始应用此样式，您应该使用d-none 。
因此，将您的<div class=”col-2 d-sm-none d-md-block”>更改为<div class=”col-2 d-none d-md-block”> 。
此外，您可以从第二个 div 中删除d-sm-block ，因为col-*类已经应用了display:block 。
此外，对我而言，您似乎希望根据屏幕尺寸显示应用了不同样式的相同菜单。 如果我错了纠正我。
对于这种情况，我建议菜单只使用一个 html 块并根据屏幕大小应用样式，而不是复制内容。
将此小提琴视为近似值： https : //jsfiddle.net/p8ek5ths/
为<div class="col-2 d-sm-none d-md-block">添加此类d-none
<div class="col-2 d-none d-md-block">
<div class="nav flex-column list-group" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="list-group-item list-group-item-action active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">small no</a>
<a class="list-group-item list-group-item-action" id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
<a class="list-group-item list-group-item-action" id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
<a class="list-group-item list-group-item-action" id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
</div>
</div>
<div class="col-12 d-sm-block d-md-none">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link " id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
</li>
<li class="nav-item">
<a class="nav-link " id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
</li>
<li class="nav-item">
<a class="nav-link " id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
</li>
</ul>
</div>
Bootstrap Tabcollapse不适用于小屏幕上的jQuery调用
[英]Bootstrap tabcollapse not working for jquery call on small screens
Bootstrap 3：有没有办法在使用小屏幕时隐藏导航栏文字？
[英]Bootstrap 3: Is there a way to hide navbar-text when small screens are used?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.