bootstrap 4 cột kích thước cột

Question

Trong bootstrap 3 Tôi có thể áp dụng col-sm-xx cho các thẻ th trong các thead và đổi kích thước các cột của bảng theo ý muốn. Tuy nhiên điều này không làm việc trong bootstrap 4. Làm thế nào tôi có thể đạt được một cái gì đó như thế này trong bootstrap 4?

<thead> 
<th class="col-sm-3">3 columns wide</th> 
<th class="col-sm-5">5 columns wide</th> 
<th class="col-sm-4">4 columns wide</th> 
</thead> 

Nhìn vào mã được cung cấp không đúng kích thước, đặc biệt nếu bạn thêm một số dữ liệu vào bảng. Xem cách này chạy:

<div class="container" style="border: 1px solid black;"> 
    <table class="table table-bordered"> 
    <thead> 
     <tr class="row"> 
      <th class="col-sm-3">3 columns wide</th> 
      <th class="col-sm-5">5 columns wide</th> 
      <th class="col-sm-4">4 columns wide</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>123</td> 
      <td>456</td> 
      <td>789</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

Answer 1

Cập nhật 2018

Đảm bảo rằng bảng của bạn bao gồm các lớp table. Điều này là do Bootstrap 4 tables are "opt-in" do đó, lớp table phải được thêm cố ý vào bảng.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x cũng đã có một số CSS để thiết lập lại các tế bào bảng để họ không nổi ..

table td[class*=col-], table th[class*=col-] { 
    position: static; 
    display: table-cell; 
    float: none; 
} 

Tôi không biết tại sao điều này không phải là là Bootstrap 4 alpha, nhưng nó có thể được thêm vào trong bản phát hành cuối cùng. Thêm CSS này sẽ giúp tất cả các cột để sử dụng độ rộng thiết lập trong thead ..

Bootstrap 4 Alpha 2 Demo

---

UPDATE (như của Bootstrap 4.0.0)

Bây giờ Bootstrap 4 là flexbox , các ô trong bảng sẽ không giả định chiều rộng chính xác khi thêm col-*. Giải pháp thay thế là sử dụng lớp d-inline-block trên các ô của bảng để ngăn hiển thị mặc định: flex cột.

Một tùy chọn khác trong BS4 là sử dụng các lớp utils cỡ cho chiều rộng ...

<thead> 
    <tr> 
      <th class="w-25">25</th> 
      <th class="w-50">50</th> 
      <th class="w-25">25</th> 
    </tr> 
</thead> 

Bootstrap 4 Alpha 6 Demo

Cuối cùng, bạn có thể sử dụng d-flex trên hàng bảng (tr), và col-* lưới các lớp trên các cột (th, td) ...

<table class="table table-bordered"> 
     <thead> 
      <tr class="d-flex"> 
       <th class="col-3">25%</th> 
       <th class="col-3">25%</th> 
       <th class="col-6">50%</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="d-flex"> 
       <td class="col-sm-3">..</td> 
       <td class="col-sm-3">..</td> 
       <td class="col-sm-6">..</td> 
      </tr> 
     </tbody> 
    </table> 

Bootstrap 4.0.0 (stable) Demo

Answer 2

Bảng lớp kích thước cột đã được thay đổi từ này

<th class="col-sm-3">3 columns wide</th> 

để

<th class="col-3">3 columns wide</th> 

Answer 3

Một lựa chọn khác là để áp dụng phong cách flex tại dòng của bảng, và thêm col-classes vào phần tử bảng/dữ liệu bảng:

<table> 
    <thead> 
    <tr class="d-flex"> 
     <th class="col-3">3 columns wide header</th> 
     <th class="col-sm-5">5 columns wide header</th> 
     <th class="col-sm-4">4 columns wide header</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="d-flex"> 
     <td class="col-3">3 columns wide content</th> 
     <td class="col-sm-5">5 columns wide content</th> 
     <td class="col-sm-4">4 columns wide content</th> 
    </tr> 
    </tbody> 
</table> 

Answer 4

Tính đến Alpha 6 bạn có thể tạo các tập tin sass sau:

@each $breakpoint in map-keys($grid-breakpoints) { 
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 

    col, td, th { 
    @for $i from 1 through $grid-columns { 
     &.col#{$infix}-#{$i} { 
      flex: none; 
      position: initial; 
     } 
    } 

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) { 
     @for $i from 1 through $grid-columns { 
     &.col#{$infix}-#{$i} { 
      width: 100%/$grid-columns * $i; 
     } 
     } 
    } 
    } 
}