Twitter Bootstrap: ẩn phần tử khi xem trên tablet

Trong HTML sử dụng Twitter Bootstrap, em có một thanh navigation ở đầu trang. Trong thanh navigation này có chứa một phần tử <form>. Hiện tại phần tử <form> này được hiển thị trên màn hình lớn @screen-lg và màn hình cỡ trung @screen-md. Tuy nhiên do navigation của em có nhiều menu nên em muốn ẩn form này trên các thiết bị màn hình @screen-md để tránh việc layout của thanh navigation bị bể thành hai dòng.

Em sử dụng tên class cho form này như sau:

<form class="hidden-md">
</form>

Nhưng khi kiểm tra trên trình duyệt thì em thấy phần tử <form> lúc này bị ẩn trên cả cả màn hình @screen-lg@screen-md. Mọi ngưởi cho em hỏi trong Twitter Bootstrap có cách nào để ẩn phần tử chỉ trên màn hình tablet?

1 Answer(s)

Phan Quang Phan Quang

<form class="visible-md visible-lg"></form>=> chỉ hiển thị trên medium và large (ẩn tablet)

hoặc

<form class="hidden-xs hidden-sm"></form>=> chỉ ẩn trên extra small và small (hiện tablet)

Nếu bạn không dùng bootstrap, bạn cũng có thể tự viết media query cho mình:

@media screen and (max-width: 767px) {

.navigation-need-to-hide { display: none; }

}

Content must be at least 100 characters

Related Discussion