Bootstrap ẩn-sm-down không hoạt động

Question

Tôi đang sử dụng Boostrap 3. Tại sao <div> với hidden-sm-down vẫn hiển thị khi tôi thay đổi kích thước trang trên máy tính xách tay của mình? Tôi muốn ẩn hai hình ảnh đó trên các thiết bị nhỏ để có một menu khác.

<div class="row">     
    <div class="col-md-7 left"> 
     <ul class="row"> 
      <li class="col-md-2"> 
       <a href="">Text</a> 
      </li> 
      <li class="col-md-2"> 
       <a href="">Text</a> 
      </li> 
      <li class="col-md-3"> 
       <a href="">Text</a> 
      </li> 
      <li class="col-md-3"> 
       <a href="">Text</a> 
      </li> 
      <li class="col-md-2"> 
       <a href="">Text</a> 
      </li> 
     </ul> 
    </div> 
    <div class="col-md-1 hidden-sm-down wave"> 
     <img src="img/ondina.png" /> 
    </div> 
    <div class="col-md-3 right"> 
     <ul class="row"> 
      <li class="col-md-6"> 
       <a href="">Text</a> 
      </li> 
      <li class="col-md-6"> 
       <a href="">Text</a> 
      </li> 
     </ul> 
    </div> 
    <div class="col-md-1 hidden-sm-down right-border"> 
     <img src="img/menu-right.png" /> 
    </div> 
</div> 

Answer 1

Như Jaqen nói, nếu bạn sử dụng Bootrstrap 3, bạn nên sử dụng hidden-sm để thay thế.

Ngoài ra, nếu bạn muốn ẩn hình ảnh trên màn hình nhỏ, bạn phải thêm hidden-xs.

Dưới đây là một JsFiddle: DEMO

Answer 2

Bạn đề cập đến bạn sử dụng Bootstrap 3

Sử dụng hidden-sm thay vì hidden-sm-down thuộc Bootstrap 4

Trên một mặt lưu ý:

Bạn cũng có đề cập đến:

Tôi wan để ẩn hai hình ảnh đó trên các thiết bị nhỏ để có menu khác.

hidden-sm sẽ ẩn phần tử trên màn hình nhỏ như iPad. Để ẩn trên màn hình nhỏ phụ (chẳng hạn như Điện thoại < 768px), hãy thêm hidden-xs.

Hãy nhìn vào các Bootstrap kích thước bảng here

Answer 3

Trên thực tế, hidden-sm-down sẽ không làm việc với BS4

Với BS4, lớp tiện ích hiển thị được hoàn toàn thay đổi. Sử dụng định dạng này thay thế;

.d-{breakpoint}-{value} 

Thông tin khác; https://getbootstrap.com/docs/4.0/utilities/display/