Ẩn các yếu tố trong bố trí đáp ứng?

Nhìn qua bootstrap, có vẻ như họ hỗ trợ thu gọn các mục menubar cho màn hình nhỏ hơn. Có một cái gì đó tương tự cho các mục khác trên trang?

Ví dụ, tôi có một viên thuốc điều hướng nổi bên phải. Trên màn hình nhỏ, điều này gây ra vấn đề. Tôi ít nhất muốn đưa nó vào một danh sách thả xuống tương tự như nhấp chuột để hiển thị nhiều hơn.

Điều này có thể trong khuôn khổ Bootstrap hiện tại không?

Các lớp hiển thị mới được thêm vào Bootstrap

Thiết bị cực nhỏ Điện thoại (<768px)(Class names : .visible-xs-block, hidden-xs)

Máy tính bảng nhỏ (≥768px)(Class names : .visible-sm-block, hidden-sm)

Máy tính để bàn thiết bị trung bình (≥992px)(Class names : .visible-md-block, hidden-md)

Máy tính để bàn thiết bị lớn (≥1200px)(Class names : .visible-lg-block, hidden-lg)

Để biết thêm thông tin: http://getbootstrap.com/css/#responsive-utilities

Dưới đây không được chấp nhận kể từ v3.2.0

Thiết bị cực nhỏ Điện thoại (<768px) (Class names : .visible-xs, hidden-xs)

Máy tính bảng nhỏ (≥768px) (Class names : .visible-sm, hidden-sm)

Máy tính để bàn thiết bị trung bình (≥992px) (Class names : .visible-md, hidden-md)

Máy tính để bàn thiết bị lớn (≥1200px) (Class names : .visible-lg, hidden-lg)

Bootstrap cũ hơn nhiều

.hidden-phone, .hidden-tablet vv không được hỗ trợ / lỗi thời.

CẬP NHẬT:

Trong Bootstrap 4 có 2 loại lớp:

• Cái hidden-*-upmà ẩn phần tử khi khung nhìn ở điểm dừng nhất định hoặc rộng hơn.
• hidden-*-down mà ẩn phần tử khi khung nhìn ở điểm dừng nhất định hoặc nhỏ hơn.

Ngoài ra, xlchế độ xem mới được thêm cho các thiết bị có chiều rộng hơn 1200px. Để biết thêm thông tin bấm vào đây .

Bootstrap 4 Beta Trả lời:

d-block d-md-noneđể ẩn trên các thiết bị trung bình, lớn và cực lớn .

d-none d-md-blockđể ẩn trên các thiết bị nhỏ và cực nhỏ .

Lưu ý rằng bạn cũng có thể nội tuyến bằng cách thay thế d-*-blockbằngd-*-inline-block

Câu trả lời cũ: Bootstrap 4 Alpha

• Bạn có thể sử dụng các lớp .hidden-*-upđể ẩn trên một kích thước nhất định và các thiết bị lớn hơn

  .hidden-md-upđể ẩn trên các thiết bị trung bình, lớn và cực lớn .

• Điều tương tự cũng xảy ra với .hidden-*-downviệc ẩn trên một kích thước nhất định và các thiết bị nhỏ hơn

  .hidden-md-downđể ẩn trên trung bình, nhỏ và ngoài nhỏ thiết bị

• nhìn thấy- * không còn là một tùy chọn với bootstrap 4

• Để chỉ hiển thị trên các thiết bị trung bình , bạn có thể kết hợp cả hai:

  hidden-sm-down và hidden-xl-up

Các kích thước hợp lệ là:

• xs cho điện thoại ở chế độ dọc (<34em)
• sm cho điện thoại ở chế độ ngang (≥34em)
• md cho máy tính bảng (≥48em)
• lg cho máy tính để bàn (≥62em)
• xl cho máy tính để bàn (≥75em)

Đây là vào Bootstrap 4, alpha 5 (tháng 1 năm 2017). Thêm chi tiết tại đây: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Trên Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/

Bootstrap 4.x trả lời

hidden-* các lớp được gỡ bỏ từ Bootstrap 4 beta trở đi.

Nếu bạn muốn hiển thị trên phương tiện trở lên, hãy sử dụng các d-*lớp, ví dụ:

<div class="d-none d-md-block">This will show in medium and up</div>

Nếu bạn muốn chỉ hiển thị nhỏ và bên dưới, hãy sử dụng điều này:

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

Kích thước màn hình và biểu đồ lớp

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

Thay vì sử dụng .visible-*các lớp rõ ràng , bạn làm cho một phần tử hiển thị bằng cách đơn giản là không ẩn nó ở kích thước màn hình đó. Bạn có thể kết hợp một .d-*-nonelớp với một .d-*-blocklớp để chỉ hiển thị một thành phần trên một khoảng kích thước màn hình nhất định (ví dụ: .d-none.d-md-block.d-xl-none chỉ hiển thị thành phần đó trên các thiết bị vừa và lớn).

Tài liệu

Bạn có thể nhập các hậu tố lớp mô-đun cho bất kỳ mô-đun nào để kiểm soát tốt hơn nơi nó sẽ hiển thị hoặc bị ẩn.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop 

http://twitter.github.com/bootstrap/scaffolding.html cuộn xuống dưới cùng

Tôi có một vài giải thích để thêm vào đây:

1) Danh sách hiển thị (điện thoại hiển thị, máy tính bảng hiển thị, v.v.) không được dùng trong Bootstrap 3. Các giá trị mới là:

• hiển thị-xs- *
• nhìn thấy-sm- *
• nhìn thấy-md- *
• nhìn thấy-lg- *
• ẩn-xs- *
• ẩn-sm- *
• ẩn-md- *
• ẩn-lg- *

Dấu hoa thị dịch theo sau cho mỗi (Tôi chỉ hiển thị-xs- * bên dưới):

• nhìn thấy-xs-block
• hiển thị-xs-nội tuyến
• nhìn thấy-xs-inline-block

2) Khi bạn sử dụng các lớp này, bạn không thêm một khoảng thời gian ở phía trước (như được thể hiện một cách khó hiểu trong một phần của câu trả lời ở trên).

Ví dụ:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) Bạn có thể sử dụng hiển thị- * và hidden- * (ví dụ: hiển thị-xs và hidden-xs) nhưng những thứ này không được dùng trong Bootstrap 3.2.0.

Để biết thêm chi tiết và thông số kỹ thuật mới nhất, hãy truy cập vào đây và tìm kiếm "hiển thị": http://getbootstrap.com/css/

Tất cả hidden-*-up, hidden-*các lớp không hoạt động với tôi, vì vậy tôi đang thêm hiddenlớp tự tạo trước đây visible-*(hoạt động cho phiên bản bootstrap hiện tại). Nó rất hữu ích nếu bạn chỉ hiển thị div cho một màn hình và ẩn cho tất cả các màn hình khác.

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>

Đối với Bootstrap 4.0 beta (và tôi cho rằng điều này sẽ ở lại cuối cùng) có một sự thay đổi - hãy lưu ý rằng các lớp ẩn đã bị xóa.

Xem tài liệu: https://getbootstrap.com/docs/4.0/utilities/display/

Để ẩn nội dung trên thiết bị di động và hiển thị trên các thiết bị lớn hơn, bạn phải sử dụng các lớp sau:

d-none d-sm-block

Tập lớp thứ nhất không hiển thị tất cả trên các thiết bị và lớp thứ hai hiển thị cho các thiết bị "sm" lên (bạn có thể sử dụng md, lg, v.v. thay vì sm nếu bạn muốn hiển thị trên các thiết bị khác nhau.

Tôi đề nghị đọc về điều đó trước khi di chuyển:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

Trong boostrap 4.1 (chạy đoạn trích vì tôi đã sao chép toàn bộ mã bảng từ tài liệu Bootstrap):

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

<table class="fixed_headers">
  <thead>
    <tr>
      <th>Screen Size</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hidden on all</td>
      <td><code class="highlighter-rouge">.d-none</code></td>
    </tr>
    <tr>
      <td>Hidden only on xs</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on sm</td>
      <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on md</td>
      <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on lg</td>
      <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on xl</td>
      <td><code class="highlighter-rouge">.d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible on all</td>
      <td><code class="highlighter-rouge">.d-block</code></td>
    </tr>
    <tr>
      <td>Visible only on xs</td>
      <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
    </tr>
    <tr>
      <td>Visible only on sm</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
    </tr>
    <tr>
      <td>Visible only on md</td>
      <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
    </tr>
    <tr>
      <td>Visible only on lg</td>
      <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible only on xl</td>
      <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
    </tr>
  </tbody>
</table>

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements