Phần tử ẩn bootstrap trên Twitter trên các thiết bị nhỏ

Question 1

Tôi có mã này:

<footer class="row">
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 4</li>
      <li>Text 5</li>
      <li>Text 6</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 7</li>
      <li>Text 8</li>
      <li>Text 9</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 10</li>
      <li>Text 11</li>
      <li>Text 12</li>
    </ul>
  </nav>
</footer>

Bốn khối với một số văn bản bên trong. Chúng có chiều rộng bằng nhau, tôi đã đặt col-sm-3tất cả chúng và những gì tôi muốn làm là ẩn phần cuối cùng navtrên các thiết bị cực nhỏ. Tôi đã cố gắng sử dụng hidden-xstrên đó navvà nó ẩn nó đi, nhưng đồng thời tôi muốn các khối khác mở rộng (thay đổi lớp từ col-sm-3thành col-sm-4) col-sm-4 X 3 = 12.

Bất kì giải pháp nào?

Question 2

Trên thiết bị nhỏ: 4 columns x 3 (= 12) ==> col-sm-3

Trên cực nhỏ: 3 columns x 4 (= 12) ==> col-xs-4

 <footer class="row">
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 7</li>
            <li>Text 8</li>
            <li>Text 9</li>
            </ul>
        </nav>
        <nav class="hidden-xs col-sm-3">
            <ul class="list-unstyled">
            <li>Text 10</li>
            <li>Text 11</li>
            <li>Text 12</li>
            </ul>
        </nav>
    </footer>

Như bạn nói, ẩn-xs là không đủ, bạn phải kết hợp xs và sm class.

Đây là các liên kết đến tài liệu chính thức về các lớp đáp ứng có sẵn và về hệ thống lưới .

Có trong đầu:

1 hàng = 12 cột
Đối với thiết bị trung tâm mua sắm X tra S : col-xs -__
Đối với tất cả thiết bị SM : col-sm -__
Đối với M e D ium Device : col-md -__
Đối với Thiết bị L ar G e : col-lg -__
Đặt ở chế độ chỉ hiển thị (ẩn trên khác): hiển thị-md (chỉ hiển thị trong phương tiện [không hiển thị trong lg xs hoặc sm])
Hãy chỉ ẩn (có thể nhìn thấy trên kia): ẩn-xs (chỉ ẩn trong XtraSmall)

Question 3

Bootstrap 4

Các lớp hiển thị (ẩn / nhìn thấy) được thay đổi trong Bootstrap 4. Để ẩn trên xskhung nhìn, hãy sử dụng:

d-none d-sm-block

Cũng xem: Thiếu hiển thị - ** và ẩn - ** trong Bootstrap v4

Bootstrap 3 (câu trả lời gốc)

Sử dụng hidden-xslớp tiện ích ..

<nav class="col-sm-3 hidden-xs">
        <ul class="list-unstyled">
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        </ul>
</nav>

http://bootply.com/90722

Question 4

Đối với Bootstrap 4.0 có một sự thay đổi

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 hợp lớp đầu tiên không hiển thị trên tất cả các thiết bị và tập thứ hai hiển thị nó cho các thiết bị "sm" trở 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 khuyên bạn nên đọc về điều đó trước khi di chuyển:

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

Question 5

<div class="small hidden-xs">
    Some Content Here
</div>

Điều này cũng hoạt động đối với các phần tử không nhất thiết được sử dụng trong lưới / cột nhỏ. Khi nó được hiển thị trên màn hình lớn hơn, kích thước phông chữ sẽ nhỏ hơn kích thước phông chữ văn bản mặc định của bạn.

Câu trả lời này thỏa mãn câu hỏi trong tiêu đề OP (đó là cách tôi tìm thấy Q / A này).