Làm thế nào để sử dụng bootstrap để che giấu một trong div khi cửa sổ trình duyệt zoom kích thước nhỏ hơn

Question

tôi sử dụng bootstrap để thiết kế giao diện web của tôi, và bây giờ tôi có một yêu cầu như sau:

tôi xác định bên dưới cấu trúc div như id div họ là: part1 và part2

<div class="container"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div id="part1" class="col-md-6"> 
        <div> 
         xxxx 
        </div> 
       </div> 
       <div id="part2" class="col-md-6"> 
        <div> 
         yyy 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Bây giờ tôi muốn ẩn part1 tự động khi kích thước cửa sổ trình duyệt co hoặc trình duyệt điện thoại của tôi, thế nào tôi có thể đạt được hiệu ứng này?

BTW: Tôi cố gắng thêm "thu gọn" css vào part1 dưới dạng nhưng ẩn ngay cả khi trình duyệt của tôi lớn hơn.

Answer 1

Đây là một mã làm việc, tôi đã thử nghiệm ..

<div class="row"> 
    <div class="col-md-4">.col-md-4</div> 
    <div class="col-md-4 ">.col-md-4</div> 
    <div class="col-md-4 visible-lg">.col-md-4</div> 
    </div> 

Answer 2

lớp Sử dụng năng hiển thị trong bootstrap ẩn điện thoại ẩn-tablet dựa trên yêu cầu của bạn

<div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
      <div id="part1" class="col-md-6 hidden-phone"> 
       <div> 
        xxxx 
       </div> 
      </div> 
      <div id="part2" class="col-md-6"> 
       <div> 
        yyy 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 3

phải trả lời cho Bootstrap 3

Sử dụng các lớp tiện ích để hiển thị và ẩn nội dung theo quyết định thông qua truy vấn phương tiện. Cố gắng sử dụng các đề tài trên cơ sở hạn chế và tránh tạo ra các phiên bản hoàn toàn khác nhau của trang web smae. Thay vào đó, hãy sử dụng chúng để bổ sung cho từng bản trình bày của thiết bị.

Nguồn: http://getbootstrap.com/css/#responsive-utilities