Rozmiar kolumn tabeli

Question 1

W programie Bootstrap 3mogę dowolnie stosować col-sm-xxdo thtagów w theadkolumnach tabeli i zmieniać ich rozmiar. Jednak to nie działa w bootstrapie 4. Jak mogę osiągnąć coś takiego w 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>

Patrząc na codeply, pod warunkiem, że nie ma on prawidłowego rozmiaru, szczególnie jeśli dodasz jakieś dane do tabeli. Zobacz, jak to działa:

<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>

Question 2

Zaktualizowano 2018

Upewnij się, że Twój stół obejmuje tablezajęcia. Dzieje się tak, ponieważ tabele Bootstrap 4 są „opt-in”, więc tableklasa musi zostać celowo dodana do tabeli.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x miał również trochę CSS do resetowania komórek tabeli, tak aby się nie unosiły.

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

Nie wiem, dlaczego to nie jest wersja alfa Bootstrap 4, ale może zostać dodana w ostatecznej wersji. Dodanie tego CSS pomoże wszystkim kolumnom używać szerokości ustawionych w thead...

Demo Bootstrap 4 Alpha 2

UPDATE (od Bootstrap 4.0.0)

Teraz, gdy Bootstrap 4 to flexbox, komórki tabeli nie przyjmują prawidłowej szerokości podczas dodawania col-*. Obejściem problemu jest użycie d-inline-blockklasy w komórkach tabeli, aby zapobiec domyślnemu wyświetlaniu: flex kolumn.

Inną opcją w BS4 jest użycie klas narzędzi rozmiaru dla szerokości ...

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

Demo Bootstrap 4 Alpha 6

Na koniec możesz użyć d-flexw wierszach tabeli (tr) i col-*klasach siatki w kolumnach (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 (stabilny) Demo

Uwaga: Zmiana TR na wyświetlenie: flex może zmienić granice

Question 3

Inną opcją jest zastosowanie stylu flex w wierszu tabeli i dodanie col-classesdo nagłówka tabeli / elementów danych tabeli:

<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>

Question 4

Używanie d-flexklasy działa dobrze, ale niektóre inne atrybuty nie działają już jak vertical-align: middleproperty.

Najlepszym sposobem, w jaki udało mi się bardzo łatwo zmienić rozmiar kolumn, jest użycie widthatrybutu z wartością procentową tylko w theadkomórkach.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

Question 5

Zhakowałem to w celu wydania Bootstrap 4.1.1 na moje potrzeby, zanim zobaczyłem post @ florian_korner. Wygląda bardzo podobnie.

Jeśli używasz sass, możesz wkleić ten fragment na końcu dołączonych plików bootstrap. Wydaje się, że rozwiązuje problem z Chrome, IE i Edge. Wydaje się, że nic nie psuje w przeglądarce 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);
        }
    }
}

lub jeśli chcesz tylko skompilowane narzędzie 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%; }

Question 6

Zastrzeżenie: ta odpowiedź może być nieco stara. Od czasu wydania bootstrap 4 beta. Bootstrap zmienił się od tego czasu.

Od tego zmieniono klasę wielkości kolumn tabeli

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

do

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

Question 7

Mogę rozwiązać ten problem za pomocą następującego kodu za pomocą 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>

Question 8

Od wersji Alpha 6 możesz utworzyć następujący plik 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;
        }
      }
    }
  }
}

Answer 1

W programie Bootstrap 3mogę dowolnie stosować col-sm-xxdo thtagów w theadkolumnach tabeli i zmieniać ich rozmiar. Jednak to nie działa w bootstrapie 4. Jak mogę osiągnąć coś takiego w 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>

Patrząc na codeply, pod warunkiem, że nie ma on prawidłowego rozmiaru, szczególnie jeśli dodasz jakieś dane do tabeli. Zobacz, jak to działa:

<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 2

1

jako dodatek do tego pytania: jeśli masz długą zawartość (taką jak bardzo długie adresy URL), aby wyświetlić tabele bootstrap 4, nie jest to świetne rozwiązanie, nawet z odpowiedzią dotyczącą rozmiaru poniżej. użycie rozwiązania typu flex-row lub row / col zazwyczaj działa lepiej z przepełnieniem i zawijaniem tekstu

Killerpixler

Answer 3

Zaktualizowano 2018

Upewnij się, że Twój stół obejmuje tablezajęcia. Dzieje się tak, ponieważ tabele Bootstrap 4 są „opt-in”, więc tableklasa musi zostać celowo dodana do tabeli.

http://codeply.com/go/zJLXypKZxL

Bootstrap 3.x miał również trochę CSS do resetowania komórek tabeli, tak aby się nie unosiły.

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

Nie wiem, dlaczego to nie jest wersja alfa Bootstrap 4, ale może zostać dodana w ostatecznej wersji. Dodanie tego CSS pomoże wszystkim kolumnom używać szerokości ustawionych w thead...

Demo Bootstrap 4 Alpha 2

UPDATE (od Bootstrap 4.0.0)

Teraz, gdy Bootstrap 4 to flexbox, komórki tabeli nie przyjmują prawidłowej szerokości podczas dodawania col-*. Obejściem problemu jest użycie d-inline-blockklasy w komórkach tabeli, aby zapobiec domyślnemu wyświetlaniu: flex kolumn.

Inną opcją w BS4 jest użycie klas narzędzi rozmiaru dla szerokości ...

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

Demo Bootstrap 4 Alpha 6

Na koniec możesz użyć d-flexw wierszach tabeli (tr) i col-*klasach siatki w kolumnach (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 (stabilny) Demo

Uwaga: Zmiana TR na wyświetlenie: flex może zmienić granice

Answer 4

Właściwie to nie ma odpowiedniego rozmiaru. Sprawdź to, jeśli dodasz kilka obramowań, aby zobaczyć, jak wygląda rozmiar i kiedy dodajesz wiersz do ciała. Umieściłem kod w pytaniu

Killerpixler

Answer 5

W rzeczywistości Twój przykład BS4-A6 nie działa, jeśli masz przepełnioną zawartość w kolumnie, ponieważ inne kolumny nie są rozszerzone. Spróbuj wkleić lorem ipsum w jednej kolumnie.

Killerpixler

Answer 6

1

Twoje rozwiązanie zadziałało. W moim przypadku musiałem dodać brak rynien w tr, aby uniknąć ujemnego wypełnienia jsfiddle.net/Vimalan/xhvdcasn

Vimalan Jaya Ganesh

Answer 7

Tak, w-25, w-50oraz w-75zajęcia pracy z bootstrap 4. Dzięki!

olidem

Answer 8

26

Inną opcją jest zastosowanie stylu flex w wierszu tabeli i dodanie col-classesdo nagłówka tabeli / elementów danych tabeli:

<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>

Jacob van Lingen
źródło

1

Działa, ale vertical-align: middlejuż nie działa z d-flexklasą.

Wigilia

Wyrównanie w pionie rzeczywiście nie działa w układzie flexbox. Użyj align-items: baseline. Aby dowiedzieć się więcej o flexbox, przeczytaj ten przewodnik

Jacob van Lingen

Answer 9

1

Działa, ale vertical-align: middlejuż nie działa z d-flexklasą.

Wigilia

Answer 10

Wyrównanie w pionie rzeczywiście nie działa w układzie flexbox. Użyj align-items: baseline. Aby dowiedzieć się więcej o flexbox, przeczytaj ten przewodnik

Jacob van Lingen

Answer 11

Używanie d-flexklasy działa dobrze, ale niektóre inne atrybuty nie działają już jak vertical-align: middleproperty.

Najlepszym sposobem, w jaki udało mi się bardzo łatwo zmienić rozmiar kolumn, jest użycie widthatrybutu z wartością procentową tylko w theadkomórkach.

<table class="table">
    <thead>
        <tr>
            <th width="25%">25%</th>
            <th width="25%">25%</th>
            <th width="50%">50%</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>25%</td>
            <td>25%</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

Answer 12

5

Najprostsze i najlepsze rozwiązanie, szczerze. Wszystko inne zawiodło mi żałośnie.

Creature

Answer 13

3

Uwaga Używanie atrybutu szerokości dla <th> nie jest teraz obsługiwane w HTML5

StefanJM

Answer 14

Zhakowałem to w celu wydania Bootstrap 4.1.1 na moje potrzeby, zanim zobaczyłem post @ florian_korner. Wygląda bardzo podobnie.

Jeśli używasz sass, możesz wkleić ten fragment na końcu dołączonych plików bootstrap. Wydaje się, że rozwiązuje problem z Chrome, IE i Edge. Wydaje się, że nic nie psuje w przeglądarce 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);
        }
    }
}

lub jeśli chcesz tylko skompilowane narzędzie 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%; }

Answer 15

5

Zastrzeżenie: ta odpowiedź może być nieco stara. Od czasu wydania bootstrap 4 beta. Bootstrap zmienił się od tego czasu.

Od tego zmieniono klasę wielkości kolumn tabeli

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

do

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

Abdalla Arbab
źródło

Wydaje się, że to nie działa przy ustawianiu szerokości kolumn: codeply.com/go/Utyon2XEB6

Zim

Zobacz ten stackoverflow.com/questions/41794746/…

Abdalla Arbab

1

Drugie pytanie jest niezwiązane. Szerokości kolumn nie działają w komórkach tabeli z powodu BS4 alpha 6 flexbox, jak wyjaśniono w mojej odpowiedzi.

Zim

Answer 16

Wydaje się, że to nie działa przy ustawianiu szerokości kolumn: codeply.com/go/Utyon2XEB6

Zim

Answer 17

Zobacz ten stackoverflow.com/questions/41794746/…

Abdalla Arbab

Answer 18

1

Drugie pytanie jest niezwiązane. Szerokości kolumn nie działają w komórkach tabeli z powodu BS4 alpha 6 flexbox, jak wyjaśniono w mojej odpowiedzi.

Zim

Answer 19

Mogę rozwiązać ten problem za pomocą następującego kodu za pomocą 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>

Answer 20

Od wersji Alpha 6 możesz utworzyć następujący plik 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;
        }
      }
    }
  }
}

Answer 21

ten kod w ogóle nie działa - próbowałem go debugować przez 1,5 godziny, ale moja znajomość sass jest zbyt słaba, aby to zrobić. Plz opublikuj przykłady robocze następnym razem.

Slowwie

Rozmiar kolumn tabeli

Odpowiedzi: