Bảng nghịch đảo Bootstrap và thead không tạo kiểu dáng chính xác

Khi làm việc trên một dự án dựa trên Bootstrap, tôi gặp một vấn đề lạ khi một số kiểu dáng bị ghi đè bởi biểu định kiểu tác nhân người dùng (trong Chrome và Firefox). Tôi tìm thấy this related issue, đã được giải quyết bằng cách bao gồm thẻ <!DOCTYPE html> mà ban đầu tôi đã bỏ qua. Nhưng bây giờ tôi không thể có các lớp học .table-inverse, .thead-inverse hoặc .thead-default để tô bóng các tiêu đề bảng của tôi. Theo như tôi hiểu, tôi có tất cả các hàng cần thiết, thùng chứa, vv tại chỗ.Bảng nghịch đảo Bootstrap và thead không tạo kiểu dáng chính xác

Tại sao nền không hoạt động?

.navbar { 
 
    border-radius: 0px 
 
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<h2 class="display-1">Bootstrap 4 Inverse Table</h2> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-md-offset-3"> 
 
     <table class="table table-inverse"> 
 
     <thead> 
 
      <tr> 
 
      <th>#</th> 
 
      <th>First Name</th> 
 
      <th>Last Name</th> 
 
      <th>Username</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <th scope="row">1</th> 
 
      <td>Mark</td> 
 
      <td>Otto</td> 
 
      <td>@mdo</td> 
 
      </tr> 
 
      <tr> 
 
      <th scope="row">2</th> 
 
      <td>Jacob</td> 
 
      <td>Thornton</td> 
 
      <td>@fat</td> 
 
      </tr> 
 
      <tr> 
 
      <th scope="row">3</th> 
 
      <td>Larry</td> 
 
      <td>the Bird</td> 
 
      <td>@twitter</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>

View on JSFiddle

Nguồn

2016-02-05 Bradley Parker

Bạn cũng phải thêm bootstrap-X.X-flex.css.

bootstrap-X.X.css 
bootstrap-X.X-flex.css 
bootstrap.js

đâu X.X là số phiên bản

HOẶC

Sử dụng CDN này:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

Nguồn

2016-02-09 05:54:24 Trix

Điều đó sẽ thực hiện. Không nhận ra đây là thứ v4. Cảm ơn! –

Tôi tìm bootstrap-X.X-flex.css ở đâu? – embe

@embe [Flexbox hỗ trợ cuối cùng đã đến với Bootstrap. Chọn tham gia các kiểu bố cục CSS mới bằng thao tác vuốt của biến hoặc hoán đổi biểu định kiểu.] (Http://v4-alpha.getbootstrap.com/getting-started/flexbox/) – Trix

đủ dễ dàng. Trang CSS bạn đang liên kết đến trong fiddle của bạn không bao gồm kiểu dáng .table-inverse.

Nguồn

2016-02-05 21:31:37

Tôi biết bạn có thể chọn và chọn tệp JS khởi động nào để tải xuống, nhưng tôi nghĩ rằng tất cả CSS khởi động đều có trong một tệp. Tôi có thể tìm các tệp CSS bổ sung cho những thứ như kiểu dáng '.table-inverse' ở đâu? –

Hãy chắc chắn bạn đang sử dụng thứ <> thay < td> vào tiêu đề.

Nguồn

2016-11-16 21:47:59

Điều này chỉ xảy ra đối với các phiên bản cũ của bootstrap. Vì lớp học thead-inverse không có sẵn ở đó. Bạn chỉ có thể thêm thiết kế này vào thiết kế của bạn css Tôi hy vọng nó chắc chắn sẽ hoạt động như tôi đã làm như vậy. Lý do đằng sau điều này là thead-inverse chỉ khả dụng trong các phiên bản gần đây của bootstrap.css.

.thead-inverse th { 
      color: #fff; 
      background-color: #373a3c; 
     }

Nguồn

2017-07-21 05:52:00 gdmanandamohon

Đối với bất cứ ai như tôi tìm chủ đề này nhưng sử dụng Bootstrap 4.0.0-beta.2 hay muộn, bảng-nghịch đảo và thead-nghịch đảo đã được thay thế bằng dark mỗi việc phát hành phiên bản thông tin được liên kết here

Nguồn

2017-10-24 04:48:40 superbeck

Bảng nghịch đảo Bootstrap và thead không tạo kiểu dáng chính xác

Trả lời

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