2013-05-14 36 views
12

Tôi đang sử dụng DataTables.net + Twitter Bootstrap và bố cục đáp ứng, những gì tôi đang cố gắng ẩn một số cột trong bảng bằng cách sử dụng lớp "máy tính để bàn có thể nhìn thấy" cho thấy các cột chỉ có kích thước lớn nhưng dường như không hoạt động, ẩn tốt nhưng nếu tôi thay đổi kích thước cửa sổ để có chiều rộng máy tính để bàn, các cột ẩn bắt đầu hiển thị xếp chồng lên nhau, có vẻ như vấn đề về lớp hiển thị CSS, vì kế thừa kiểu hiển thị từ cha mẹ :Twitter Bootstrap Responsive - Chỉ hiển thị Cột Bảng trên Desktop

.visible-desktop { 
    display: inherit!important; 
} 

Nếu tôi vận dụng nó để

.visible-desktop { 
    display: table-cell!important; 
} 

hoạt động tốt ... Có cách nào khác không? Hoặc tôi phải viết lớp riêng của tôi để ẩn cột bảng?

Trả lời

22

Cuối cùng tôi phát hiện ra rằng tồn tại một workaround thay thế:

visible-desktop 

bởi

hidden-phone hidden-tablet 

Hope giúp một ai đó!

+4

Nó không quan trọng để chấp nhận câu trả lời của riêng bạn, chỉ ra rằng nó là đúng. – davidkonrad

+1

Tôi phải nói câu trả lời này chỉ dành cho Boostrap 2, Boostrap 3 không tồn tại khi tôi hỏi. – Santiago

29

lớp Sẵn sàng cho .visible.hidden.

Sử dụng một hoặc kết hợp các lớp có sẵn để chuyển đổi nội dung qua các điểm ngắt khung nhìn.

bootstrap css html visible and hidden class grid

Từ Bootstrap phần ở đây http://getbootstrap.com/css/#responsive-utilities-classes

+1

Điều này không trả lời được câu hỏi. Vì các kiểu CSS được thêm vào bởi các lớp đó cho phép thiết lập: display, display-block, display-inline. Anh ta hỏi về "ô bảng" và nếu có cách nào tốt hơn để làm điều đó với BS (không thêm kiểu tùy chỉnh). –

+1

Dường như Google tiếp tục ném chủ đề này lên để trả lời các câu hỏi về các lớp 'visible' /' hidden' trong Bootstrap (dựa trên các câu trả lời thường xuyên nhận được câu trả lời gốc). – DeBraid

Các vấn đề liên quan