Tôi đã hack cái này để phát hành Bootstrap 4.1.1 theo nhu cầu của mình trước khi tôi thấy bài đăng của @ florian_korner. Trông rất giống nhau.
Nếu bạn sử dụng sass, bạn có thể dán đoạn mã này vào cuối gói khởi động của bạn. Nó dường như khắc phục sự cố cho chrome, IE và edge. Dường như không phá vỡ bất cứ điều gì trong firefox.
@mixin make-td-col($size, $columns: $grid-columns) {
width: percentage($size / $columns);
}
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@for $i from 1 through $grid-columns {
td.col#{$infix}-#{$i}, th.col#{$infix}-#{$i} {
@include make-td-col($i, $grid-columns);
}
}
}
hoặc nếu bạn chỉ muốn tiện ích css đã biên dịch:
td.col-1, th.col-1 {
width: 8.33333%; }
td.col-2, th.col-2 {
width: 16.66667%; }
td.col-3, th.col-3 {
width: 25%; }
td.col-4, th.col-4 {
width: 33.33333%; }
td.col-5, th.col-5 {
width: 41.66667%; }
td.col-6, th.col-6 {
width: 50%; }
td.col-7, th.col-7 {
width: 58.33333%; }
td.col-8, th.col-8 {
width: 66.66667%; }
td.col-9, th.col-9 {
width: 75%; }
td.col-10, th.col-10 {
width: 83.33333%; }
td.col-11, th.col-11 {
width: 91.66667%; }
td.col-12, th.col-12 {
width: 100%; }
td.col-sm-1, th.col-sm-1 {
width: 8.33333%; }
td.col-sm-2, th.col-sm-2 {
width: 16.66667%; }
td.col-sm-3, th.col-sm-3 {
width: 25%; }
td.col-sm-4, th.col-sm-4 {
width: 33.33333%; }
td.col-sm-5, th.col-sm-5 {
width: 41.66667%; }
td.col-sm-6, th.col-sm-6 {
width: 50%; }
td.col-sm-7, th.col-sm-7 {
width: 58.33333%; }
td.col-sm-8, th.col-sm-8 {
width: 66.66667%; }
td.col-sm-9, th.col-sm-9 {
width: 75%; }
td.col-sm-10, th.col-sm-10 {
width: 83.33333%; }
td.col-sm-11, th.col-sm-11 {
width: 91.66667%; }
td.col-sm-12, th.col-sm-12 {
width: 100%; }
td.col-md-1, th.col-md-1 {
width: 8.33333%; }
td.col-md-2, th.col-md-2 {
width: 16.66667%; }
td.col-md-3, th.col-md-3 {
width: 25%; }
td.col-md-4, th.col-md-4 {
width: 33.33333%; }
td.col-md-5, th.col-md-5 {
width: 41.66667%; }
td.col-md-6, th.col-md-6 {
width: 50%; }
td.col-md-7, th.col-md-7 {
width: 58.33333%; }
td.col-md-8, th.col-md-8 {
width: 66.66667%; }
td.col-md-9, th.col-md-9 {
width: 75%; }
td.col-md-10, th.col-md-10 {
width: 83.33333%; }
td.col-md-11, th.col-md-11 {
width: 91.66667%; }
td.col-md-12, th.col-md-12 {
width: 100%; }
td.col-lg-1, th.col-lg-1 {
width: 8.33333%; }
td.col-lg-2, th.col-lg-2 {
width: 16.66667%; }
td.col-lg-3, th.col-lg-3 {
width: 25%; }
td.col-lg-4, th.col-lg-4 {
width: 33.33333%; }
td.col-lg-5, th.col-lg-5 {
width: 41.66667%; }
td.col-lg-6, th.col-lg-6 {
width: 50%; }
td.col-lg-7, th.col-lg-7 {
width: 58.33333%; }
td.col-lg-8, th.col-lg-8 {
width: 66.66667%; }
td.col-lg-9, th.col-lg-9 {
width: 75%; }
td.col-lg-10, th.col-lg-10 {
width: 83.33333%; }
td.col-lg-11, th.col-lg-11 {
width: 91.66667%; }
td.col-lg-12, th.col-lg-12 {
width: 100%; }
td.col-xl-1, th.col-xl-1 {
width: 8.33333%; }
td.col-xl-2, th.col-xl-2 {
width: 16.66667%; }
td.col-xl-3, th.col-xl-3 {
width: 25%; }
td.col-xl-4, th.col-xl-4 {
width: 33.33333%; }
td.col-xl-5, th.col-xl-5 {
width: 41.66667%; }
td.col-xl-6, th.col-xl-6 {
width: 50%; }
td.col-xl-7, th.col-xl-7 {
width: 58.33333%; }
td.col-xl-8, th.col-xl-8 {
width: 66.66667%; }
td.col-xl-9, th.col-xl-9 {
width: 75%; }
td.col-xl-10, th.col-xl-10 {
width: 83.33333%; }
td.col-xl-11, th.col-xl-11 {
width: 91.66667%; }
td.col-xl-12, th.col-xl-12 {
width: 100%; }