Bootstrap: Chỉ hiển thị phần tử trên desktop và tablet

Trên trang HTML mình có một phần tử <img> hiển thị ảnh avatar của người dùng. Phần tử <img> này được đặt vào bên trong phần tử <div> như sau:

<div class="row">
    <div class="col-sm-12 col-md-6">
        <img class="img-responsive" src="...">
    </div>
</div>

Bây giờ mình cần hiển thị ảnh avatar này chỉ trên desktop và table nhưng không hiển thị trên mobile thì phải làm sao?

Chỉnh sửa
Thêm bình luận
Huỷ

1 Câu Trả Lời

Trung Quân

Twitter Bootstrap cung cấp lớp visible-*hidden-* để có thể ẩn hiện phần tử dựa trên từng loại kích thức màn hình nhất định.

Ví dụ khi sử dụng visible-xs như sau:

<div class="visible-xs">
...
</div>

thì phần tử <div> ở trên sẽ chỉ được hiển thị với màn hình với kích thước định nghĩa bởi biến @screen-xs trong Bootstrap.

Ngược lại khi sử dụng:

<div class="hidden-xs">
...
</div>

Thì phần tử <div> ở trên sẽ chỉ hiển thị trên màn hình với kích thức được định nghĩa bởi biến @screen-xs trong Bootstrap.

Kết Luận: Trong trường hợp của bạn thì đoạn mã HTML cần sử dụng sẽ như sau:

<div class="row">
    <div class="hidden-xs col-sm-12 col-md-6">
        <img class="img-responsive" src="...">
    </div>
</div>
Thêm bình luận
Huỷ

Thêm Trả Lời

Câu Hỏi Liên Quan