bootstrap 4 размер столбца таблицы

В bootstrap 3 я мог бы применить col-sm-xx к th тегам в thead и изменить таблицы столбцов по желанию. Однако это не работает в bootstrap 4. Как я могу добиться чего-то подобного в bootstrap 4?

  3 columns wide 5 columns wide 4 columns wide  

Глядя на кодовое изображение, если оно не соответствует размеру, особенно если вы добавите некоторые данные в таблицу. Посмотрите, как это работает:

 
3 columns wide 5 columns wide 4 columns wide
123 456 789

    Обновлено 2018

    Убедитесь, что таблица содержит class table . Это связано с тем, что таблицы Bootstrap 4 «opt-in», поэтому class table должен быть намеренно добавлен в таблицу.

    http://codeply.com/go/zJLXypKZxL

    Bootstrap 3.x также имел некоторый CSS для сброса ячеек таблицы, чтобы они не плавали.

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

    Я не знаю, почему это не так, а Bootstrap 4 alpha, но он может быть добавлен в финальную версию. Добавление этого CSS поможет всем столбцам использовать ширины, установленные в thead ..

    Bootstrap 4 Alpha 2 Demo


    UPDATE (начиная с Bootstrap 4.0.0)

    Теперь, когда Bootstrap 4 является flexbox, ячейки таблицы не будут принимать правильную ширину при добавлении col-* . Обходным путем является использование classа d-inline-block на ячейках таблицы для предотвращения отображения по умолчанию: flex of columns.

    Другой вариант в BS4 – использовать classы utils для ширины …

       25 50 25   

    Bootstrap 4 Alpha 6 Demo

    Наконец, вы можете использовать d-flex в строках таблицы (tr), а classы col-* grid в столбцах (th, td) …

     
    25% 25% 50%
    .. .. ..

    Bootstrap 4.0.0 (стабильный) Демо

    Другим вариантом является применение гибкого стиля в строке таблицы и добавление col-classes в элементы данных заголовка таблицы / таблицы:

     
    3 columns wide header 5 columns wide header 4 columns wide header
    3 columns wide content 5 columns wide content 4 columns wide content

    Класс размера столбца таблицы был изменен из этого

     3 columns wide 

    в

     3 columns wide 

    Начиная с Alpha 6 вы можете создать следующий sass-файл:

     @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; } } } } } 

    Я могу решить эту проблему, используя следующий код, используя Bootstrap 4:

     
    Indicador: this is my indicator
    Definición: This is my definition

    Я взломал это для выпуска Bootstrap 4.1.1 в соответствии с моими потребностями, прежде чем увидел сообщение @ florian_korner. Выглядит очень похоже.

    Если вы используете sass, вы можете вставить этот fragment в конце своей начальной загрузки. Похоже, проблема исправлена ​​для Chrome, IE и края. Кажется, ничего не сломал в 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); } } } 

    или если вы просто хотите скомпилированную утилиту css:

     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%; } 
    Interesting Posts
    Давайте будем гением компьютера.