Вопросы Теги

Ширина настроек для определенных столбцов в таблице в Bootstrap 4 [дубликат]

Это означает, что узел не может прослушивать определенный порт. Измените его на 1234 или 2000 или 3000 и перезапустите сервер.

36
задан Killerpixler 21 June 2016 в 13:25
поделиться

6 ответов

Обновлено 2018

Убедитесь, что ваша таблица содержит класс table. Это потому, что таблицы Bootstrap 4 являются «opt-in» , поэтому класс 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;
}

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

Bootstrap 4 Alpha 2 Demo

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

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

Еще одна опция в BS4 - использовать классы utils для ширины ... 

<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

Наконец, вы можете использовать d-flex в строках таблицы (tr), а классы сетки col-* на столбцы (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 (стабильный) Демонстрация

68
ответ дан Themes.guide 15 August 2018 в 15:47
поделиться
  • 1
    На самом деле это не так правильно. Проверьте это, добавили ли вы некоторые границы, чтобы узнать, как это делается, и когда вы добавляете строку в тело. Я поставил код в вопросе – Killerpixler 21 June 2016 в 13:24
  • 2
    На самом деле ваш пример BS4-A6 не работает, если вы переполняете содержимое в столбце, так как другие столбцы не расширены. Попробуйте вставить один лорам ipsum в одну колонку. – Killerpixler 27 February 2017 в 20:27
  • 3
    Ваше решение сработало. В моем случае мне нужно было добавить ненужные желоба в tr, чтобы избежать отрицательного заполнения jsfiddle.net/Vimalan/xhvdcasn – Vimalan Jaya Ganesh 17 April 2017 в 22:08
  • 4
    Отличное решение здесь. Ваше решение работало для моих динамических генерируемых данных таблицы. Престижность! – Kusaasira Joshua 10 November 2017 в 16:11
  • 5
    Спасибо, я некоторое время сражался со столами, прежде чем нашел свое решение – Agustin Cautin 31 July 2018 в 14:02

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

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

на 

<th class="col-3">3 columns wide</th>
6
ответ дан abdalla arbab 15 August 2018 в 15:47
поделиться

Начиная с 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;
        }
      }
    }
  }
}
1
ответ дан Florian Körner 15 August 2018 в 15:47
поделиться

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

<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>
10
ответ дан Jacob van Lingen 15 August 2018 в 15:47
поделиться

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

<table class="table">
  <tbody>
    <tr class="d-flex">
      <th class="col-3" scope="row">Indicador:</th>
      <td class="col-9">this is my indicator</td>
    </tr>

    <tr class="d-flex">
      <th class="col-3" scope="row">Definición:</th>
      <td class="col-9">This is my definition</td>
    </tr>

  </tbody>
</table>
1
ответ дан Jim G. 15 August 2018 в 15:47
поделиться

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

Если вы используете sass, вы можете вставить этот фрагмент в конце вашего загрузочного диска. Похоже, проблема исправлена ​​для 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%; }
0
ответ дан madamission 15 August 2018 в 15:47
поделиться
Другие вопросы по тегам:

Похожие вопросы: