Bootstrap hidden-sm-down无法正常工作

Question

我正在使用Boostrap 3.当我在笔记本电脑上调整页面大小时，为什么带有<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container container-pad"> <div class="col-md-12"> <div class="row"> <div class="col-md-3"> <ul class="list-group category" role="tablist"> <li class="list-group-item"> <a role="button" data-toggle="collapse" href="#collapseOne"> categories 1 </a> </li> <ul id="collapseOne" class="panel-collapse collapse"> <li class="list-group-item" role="presentation"> <a href="#category1" aria-controls="category1" role="tab" data-toggle="tab">category 1<span class="badge">1</span></a> </li> <li class="list-group-item" role="presentation"> <a href="#category2" aria-controls="category2" role="tab" data-toggle="tab">category 2<span class="badge">2</span></a> </li> </ul> <li class="list-group-item"> <a role="button" data-toggle="collapse" href="#collapseTwo"> categories 2 </a> </li> <ul id="collapseTwo" class="panel-collapse collapse"> <li class="list-group-item" role="presentation"> <a href="#category3" aria-controls="category3" role="tab" data-toggle="tab">category 3<span class="badge">3</span></a> </li> </ul> <li class="list-group-item"> <a role="button" data-toggle="collapse" href="#collapseThree"> categories 3 </a> </li> <ul id="collapseThree" class="panel-collapse collapse"> <li class="list-group-item" role="presentation"> <a href="#category4" aria-controls="category4" role="tab" data-toggle="tab">category 4<span class="badge">4</span></a> </li> <li class="list-group-item" role="presentation"> <a href="#category5" aria-controls="category5" role="tab" data-toggle="tab">category 5<span class="badge">5</span></a> </li> </ul> </ul> </div> <div class="col-md-9"> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="category1"> <ul class="list-group products"> <li class="list-group-item"> product 1 </li> </ul> </div> <div role="tabpanel" class="tab-pane fade" id="category2"> <ul class="list-group products"> <li class="list-group-item"> product 2 </li> <li class="list-group-item"> product 3 </li> </ul> </div> <div role="tabpanel" class="tab-pane fade" id="category3"> <ul class="list-group products"> <li class="list-group-item"> product 4 </li> <li class="list-group-item"> product 5 </li> <li class="list-group-item"> product 6 </li> </ul> </div> <div role="tabpanel" class="tab-pane fade" id="category4"> <ul class="list-group products"> <li class="list-group-item"> product 7 </li> <li class="list-group-item"> product 8 </li> <li class="list-group-item"> product 9 </li> <li class="list-group-item"> product 10 </li> </ul> </div> <div role="tabpanel" class="tab-pane fade" id="category5"> <ul class="list-group products"> <li class="list-group-item"> product 11 </li> <li class="list-group-item"> product 12 </li> <li class="list-group-item"> product 13 </li> <li class="list-group-item"> product 14 </li> <li class="list-group-item"> product 15 </li> </ul> </div> </div> </div> </div> </div> </div>的{​​{1}}仍然可见？我想在小型设备上隐藏这两个图像，以便拥有不同的菜单。

<div>

Answer 1

实际上，hidden-sm-down无法使用BS4

使用BS4，显示实用程序类已完全更改。请改用此格式;

.d-{breakpoint}-{value}

更多信息; https://getbootstrap.com/docs/4.0/utilities/display/

Answer 2

正如Jaqen所说，如果你使用Bootrstrap 3，你应该使用hidden-sm。

此外，如果您想在小屏幕上隐藏图片，则必须添加hidden-xs。

这是一个JsFiddle：DEMO

Answer 3

你提到你使用Bootstrap 3

使用hidden-sm代替属于Bootstrap 4

的hidden-sm-down

旁注：

你还提到：

  

我想在小型设备上隐藏这两个图像，以便拥有不同的菜单。

hidden-sm会将元素隐藏在iPad等小屏幕上。要隐藏在额外的小屏幕上（例如电话＆lt; 768px），请添加hidden-xs。

查看Bootstrap尺寸表here

Answer 4

如果您使用的是Bootstrap 4，则可以利用以下功能：

仅隐藏在小屏幕上

<div class="d-none d-lg-block">hidden on screens smaller than lg</div>

仅在小屏幕上可见

<div class="d-none d-sm-block">visible on small screens</div>