Jak mogę ustawić kolumny Bootstrap na tej samej wysokości?

965

Używam Bootstrap. Jak mogę zrobić trzy kolumny tej samej wysokości?

Oto zrzut ekranu przedstawiający problem. Chciałbym, aby niebieska i czerwona kolumna miały taką samą wysokość jak kolumna żółta.

Trzy kolumny ładujące z środkową kolumną dłuższą niż pozostałe dwie kolumny

Oto kod:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>

Richard
źródło
11
Na stronie bootstrap znajduje się artykuł z 5- liniowym
Eduard Gamonal
2
Przykład na Bootstrap przerywa responsywność Eduarda. Flex .rowbrakuje flex-wrap: wrap;. Oto przykład jego działania z responsywnością: codepen.io/bootstrapped/details/RrabNe
Bryan Willis
Możliwe obejście - przezroczysty obraz o szerokości 1 piksela w innych kolumnach. Ten nowy obraz o szerokości jednego piksela odpowiada wysokości piksela obrazu kota w powyższym przykładzie. (Może nie działać lub być praktyczny w twojej sytuacji)
Sql Surfer
W Bootstrap 4 możemy używać tej samej karty
Amjad Rehman A

Odpowiedzi:

1044

Rozwiązanie 4 za pomocą Bootstrap 4

Bootstrap 4 korzysta z Flexbox, więc nie ma potrzeby stosowania dodatkowego CSS.

Próbny

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

Rozwiązanie 1 używa ujemnych marginesów (nie psuje odpowiedzi)

Próbny

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Rozwiązanie 2 za pomocą tabeli

Próbny

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Dodano rozwiązanie 3 korzystające z fleksji z sierpnia 2015 r. Komentarze opublikowane wcześniej nie dotyczą tego rozwiązania.

Próbny

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
Makaroniki
źródło
7
Pomyśl o tym jak o kolumnie zasysanej w negatywną przestrzeń. Jeśli usuniesz przepełnienie, zobaczysz, co się dzieje.
Popnoodles
9
Jeśli konkretnie celujesz w klasę kolumny bootstrap, prawdopodobnie powinieneś użyć kotwicy ^ zamiast znaku wieloznacznego *. Użycie ^ powie, że klasa musi zaczynać się od col, gdzie pokazany symbol wieloznaczny będzie pasował do każdej klasy z col w dowolnym miejscu łańcucha, prawdopodobnie powodując niepożądane efekty w stylach, w których mógłbyś użyć konwencji col-. (tj. stuff-col-morestuff).
Logan G.
7
Dobra odpowiedź, z pewnymi zastrzeżeniami. Rozwiązanie 1 wyłącza liczbę zmiennoprzecinkową, a zatem psuje zachowanie reagujące na siatkę bootstrap. Rozwiązanie 2 (wyjaśnione bardziej szczegółowo w positioniseverything.net/articles/onetruelayout/equalheight ) nie pokazuje dolnej granicy (ponieważ jest przycięte gdzieś w obszarze wypełnienia).
Ohad Schneider,
14
Rozwiązanie 3 przerywa czas reakcji rzędu.
SPRBRN
10
@Popnoodles należy dodać flex-wrap: wrap;do trzeciego przykładu, aby umożliwić responsywność. Będziesz także chciał dodać display: flex; kierunek zgięcia: kolumna; do klasy kolumny. Jeśli zamierzasz używać .row, a nie klasy niestandardowej, musisz zapewnić rezerwę dla starszych przeglądarek, zmieniając flex wyświetlania z powrotem. Oto przykład
Bryan Willis,
321

Aktualizacja 2020

Najlepsze podejście do Bootstap 3.x - korzystanie z flexbox CSS (i wymaga minimalnego CSS) ..

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

Przykład paska Flexbox o tej samej wysokości

Aby zastosować Flexbox o tej samej wysokości tylko w określonych punktach przerwania (responsywnych), użyj zapytania o media. Na przykład tutaj jest sm(768px) i więcej:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

To rozwiązanie działa również dobrze dla wielu wierszy (zawijanie kolumn):
https://www.bootply.com/gCEXzPMehZ

Inne obejścia

Te opcje będą polecane przez innych, ale nie są dobrym pomysłem na responsywne projektowanie. Działa to tylko w przypadku prostych układów pojedynczych wierszy bez zawijania kolumn.

1) Korzystanie z ogromnych marginesów ujemnych i wypełnienia

2) Korzystanie z display: komórka tabeli (to rozwiązanie wpływa również na responsywną siatkę, więc kwerendy @media można użyć do zastosowania tablewyświetlania na szerszych ekranach, zanim kolumny ułożą się pionowo)


Bootstrap 4

Flexbox jest teraz domyślnie używany w Bootstrap 4, więc nie ma potrzeby, aby dodatkowy CSS tworzył kolumny o równej wysokości: http://www.codeply.com/go/IJYRI4LPwU

Przykład:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>
Zim
źródło
5
Możesz użyć zapytania o media, aby zastosować Flexbox tylko na większych / szerszych urządzeniach. Zaktualizowałem bootply: bootply.com/Cn6fA6LuTq
Zim
Jeśli ktoś jest zainteresowany, stworzyłem pióro, aby zademonstrować podobne efekty na formularzu za pomocą Flexboksa.
Justin Lau,
2
To znany błąd Safari z Flexboksem: dowód: bugs.webkit.org/show_bug.cgi?id=137730
Zim
5
@Stanley komentarz na temat „już nie reaguje” jest stary i nie ma znaczenia.
Zim
1
To jedyna poprawka, która zadziałała dla mnie. Dzięki Zim, to świetnie!
Ryan NZ
83

Nie wymaga JavaScript. Po prostu dodaj klasę .row-eq-heightdo swojej istniejącej .rowtak:

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

Wskazówka: jeśli masz więcej niż 12 kolumn w wierszu, siatka ładowania początkowego nie zawinie go. Dodaj więc div.row.row-eq-heightco 12 kolumn.

Wskazówka: może być konieczne dodanie

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

do twojego html

Kevin R.
źródło
5
oparty na Flexbox. Nie działa w IE8 lub 9, ani w systemie Android 2.x caniuse.com/#feat=flexbox
Chris Moschini
60
Uwaga: getbootstrap.vn nie jest „Bootstrap”. To projekt innej firmy.
Zim
Wydaje się, że jest to zintegrowane z bootstrap v4.
Cyril Duchon-Doris
Podałem poprawny CSS (ze strony .vn), ale wszystko popsuje. jest oparty na flex
ekkis
Świetnie ... piekło wtyczki.
Armada
63

Aby odpowiedzieć na twoje pytanie, wystarczy zobaczyć pełną responsywną wersję demonstracyjną z prefiksem css :

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

Zrzut ekranu z Codepen

Aby dodać obsługę flex zawartości miniaturek w kolumnach flex, takich jak powyższy zrzut ekranu, dodaj również ... Uwaga: możesz to zrobić również z panelami:

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

Podczas gdy Flexbox nie działa w IE9 i niższych wersjach demonstracyjnych, możesz używać wersji demonstracyjnej z rezerwą przy użyciu tagów warunkowych z czymś takim jak siatki javascript jako polifill:

<!--[if lte IE 9]>

<![endif]-->

Jeśli chodzi o dwa pozostałe przykłady w zaakceptowanej odpowiedzi ... Demo tabeli jest dobrym pomysłem, ale jest źle wdrażane. Zastosowanie tego CSS w klasach kolumn ładowania początkowego bez wątpienia całkowicie zepsuje strukturę siatki. Powinieneś używać niestandardowego selektora dla jednego i dwóch stylów tabel, które nie powinny być stosowane do tych, [class*='col-']które mają zdefiniowane szerokości. Tej metody należy używać TYLKO, jeśli chcesz kolumny o równej wysokości ORAZ równej szerokości. Nie jest przeznaczony do żadnych innych układów i NIE reaguje. Możemy to jednak cofnąć na wyświetlaczach mobilnych ...

<div class="table-row-equal">
<div class="thumbnail">
    Content...
</div>
<div class="thumbnail">
    Content...
</div>
</div>
@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

Wreszcie, pierwsze demo w zaakceptowanej odpowiedzi, które implementuje wersję jednego prawdziwego układu, jest dobrym wyborem w niektórych sytuacjach, ale nie nadaje się do kolumn bootstrap. Powodem tego jest to, że wszystkie kolumny rozszerzają się do wysokości kontenera. Spowoduje to również uszkodzenie odpowiedzi, ponieważ kolumny nie rozwijają się do elementów obok nich, ale całego kontenera. Ta metoda nie pozwoli również na stosowanie dolnych marginesów w wierszach i spowoduje inne problemy po drodze, takie jak przewijanie do tagów zakotwiczenia.

Pełny kod znajduje się w Codepen, który automatycznie poprzedza kod Flexbox.

Bryan Willis
źródło
11
To jedyna odpowiedź, która naprawdę dla mnie zadziałała. 3 najwyżej ocenione odpowiedzi to tylko strata czasu
ken2k
3
Wygląda dobrze, ale niestety nie działa w Safari 9.1 na MacOS :-(
KevinH
1
@ TheSchecke tutaj jest poprawka. O ile wiem, działa to teraz we wszystkich przeglądarkach obsługiwanych przez Flexbox. Daj mi znać, jeśli się mylę. s.codepen.io/bootstrapped/debug/pboJNd . Problem row:after, row:beforedotyczył zestawu tabel display:, którego najwyraźniej Safari nie lubi.
Bryan Willis
2
Tylko jedna głowa, że ​​to naprawdę źle psuje się w przeglądarce Safari iPada
Matthew Lock
1
Przykro nam, że to @MatthewLock. Właśnie przetestowałem na moim iPadzie Air IOS 8.1 z najnowszym safari i to działa. Byłem także w stanie przetestować na crossbrowsertesting.com za pomocą iPada mini Retina z Safari 7 i to też wydaje się działać dobrze. Oto wyniki tego testu. Czy możesz podać wersję iPada i Safari, której używasz? Chciałbym spróbować to naprawić jak najszybciej lub przynajmniej dodać komentarz w odpowiedzi, ponieważ wiem, że wiele osób go używa.
Bryan Willis
42

Wyświetlany jest tylko jeden wiersz, więc przypadek użycia może być ograniczony tylko do tego. W przypadku, gdy masz wiele wierszy, ta wtyczka - github JavaScript-grids - działa idealnie! Powoduje to, że każdy panel rozszerza się do najwyższego panelu, nadając każdemu rzędowi potencjalnie inną wysokość w zależności od najwyższego panelu w tym rzędzie. Jest to rozwiązanie jquery kontra css, ale chciałem go polecić jako alternatywne podejście.

globalSchmidt
źródło
1
Jedyne rozwiązanie, które naprawdę działa i nie psuje reakcji
Artur Kędzior
Czy pozwala to określić, że kolumny powinny być kwadratowe - czy tylko tej samej wysokości?
niico
@niico 14 - minęło trochę czasu, odkąd go użyłem, ale w mojej aplikacji wymaganiem jest, aby elementy w każdym rzędzie miały tę samą wysokość, ale wysokość może się różnić w zależności od rzędu. Ponieważ wysokość jest funkcją elementów w rzędzie, jeśli wysokość elementu jest równa ich szerokości, powinny one występować jako kwadraty.
globalSchmidt
30

Jeśli chcesz, aby działało to w dowolnej przeglądarce, użyj javascript:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});
paulalexandru
źródło
1
Mam jedną klasę div = „wiersz” ze zmienną liczbą paneli każdej klasy „col-md-4”, co powinno dać mi 3 kolumny i nieznaną liczbę wierszy, w zależności od liczby elementów, które chcę wymienić. Ten JS działał i wymaga minimalnej zmiany w moim HTML / CSS, w przeciwieństwie do różnych rzeczy CSS, które próbowałem. Jedyne, co zmieniłem, to oznaczenie wszystkich paneli kolumn dodatkową klasą, tj. „Panel o tej samej wysokości”, a następnie użycie $ („. Panel o tej samej wysokości”) zamiast $ („. Panel”)
nidalpres
1
Jedyne rozwiązanie, które zadziałało dla mnie po jednym dniu eksperymentowania z css.
Dinozaur
1
To dobre rozwiązanie, ale .ready()nie jest odpowiedni moment, aby go nazwać - należy go wezwać.load()
jave.web
1
@ jave.web Jeśli uważasz, że to dobre rozwiązanie, podnieś kciuki do góry. Dzięki
paulalexandru,
Użyj window.onload = function() {...function content above...}zamiast tego. To działa lepiej.
Blackpanther0001
10

Próbowałem wiele sugestii zawartych w tym wątku i na innych stronach, ale żadne rozwiązanie nie działało w 100% w każdej przeglądarce.

Więc eksperymentowałem dość długo i wymyśliłem to. Kompletne rozwiązanie dla kolumn Bootstrap o równej wysokości za pomocą Flexbox z tylko 1 klasą. Działa to we wszystkich głównych przeglądarkach IE10 +.

CSS:

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

HTML:

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

Aby wesprzeć jeszcze więcej wersji IE, możesz na przykład użyć https://github.com/liabru/jquery-match-height i skierować wszystkie kolumny potomne .equal-cols. Lubię to:

// Create a check for IE9 (or any other specific browser).
if(IE9) {
  $(".row.equal-cols > [class*='col-']").matchHeight();
}

Bez tego wypełniania kolumny będą zachowywać się jak zwykle kolumny Bootstrap, więc jest to dość dobry powrót.

Adam Lindqvist
źródło
To zadziałało dla mnie doskonale. Dzięki!
randlet
8

Możesz także użyć funkcji inline-flex, która działa całkiem dobrze i może być nieco czystsza niż modyfikowanie każdego elementu wiersza za pomocą CSS.

W moim projekcie chciałem, aby każdy wiersz, którego elementy potomne miały granice, miał taką samą wysokość, aby granice wyglądały na poszarpane. W tym celu stworzyłem prostą klasę css.

.row.borders{
    display: inline-flex;
    width: 100%;
}
Steffan Perry
źródło
2
Chociaż udaje się, aby cała zawartość w wierszu była tej samej wysokości; To zrywa reakcję Bootstrap.
Christine268
7

bezczelne rozwiązanie jquery, jeśli ktoś jest zainteresowany. Tylko upewnij się, że wszystkie twoje cols (el) mają wspólną nazwę klasy ... działa również responsywnie, jeśli powiążesz ją z $ (window) .resize

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

Stosowanie

$(document).ready(function(){
   equal_cols('.selector');
});

Uwaga: Ten post został zredagowany zgodnie z komentarzem @Chris, że w kodzie ustawiono tylko ostatnią najwyższą wysokość w $.each()funkcji

Marty
źródło
Jest to zaniżone - proste i małe, ale zmieni rozmiar wszystkich kolumn bez konieczności posiadania stałej liczby kolumn w wierszu. Niezłe!
Jordon
1
To nie działa, ponieważ ustawiasz ostatnią największą wysokość w każdej funkcji. Jeśli trzecia kolumna jest najwyższą kolumną, kolumny 1 i 2 nie mają odpowiedniej wysokości. Musisz ustawić ostatni wiersz „$ (this) .css ({'height': h});” po każdej funkcji. Zrobię edycję.
Chris
7

Niektóre z poprzednich odpowiedzi wyjaśniają, jak ustawić divy na tej samej wysokości, ale problem polega na tym, że gdy szerokość jest zbyt wąska, divy nie układają się w stos, dlatego możesz zastosować ich odpowiedzi za pomocą jednej dodatkowej części. Dla każdego z nich możesz użyć podanej tutaj nazwy CSS oprócz klasy wiersza, której używasz, więc div powinien wyglądać tak, jeśli zawsze chcesz, aby div znajdowały się obok siebie:

<div class="row row-eq-height-xs">Your Content Here</div>

Dla wszystkich ekranów:

.row-eq-height-xs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: row;
}

Gdy chcesz użyć sm:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

Gdy chcesz md:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

Gdy chcesz użyć lg:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

EDYCJA Na podstawie komentarza istnieje rzeczywiście prostsze rozwiązanie, ale musisz podać informacje o kolumnie od największej pożądanej szerokości dla wszystkich rozmiarów do xs (np . <div class="col-md-3 col-sm-4 col-xs-12">:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
Zachary Weixelbaum
źródło
Sprawiłeś, że stało się to o wiele bardziej skomplikowane niż potrzebujesz :) `Po prostu użyj, flex-wrap: wrap;wtedy nie potrzebujesz wszystkich osobnych ... chyba że ich konkretnie chcesz.
Bryan Willis,
to się nie udaje na iPadzie Safari
Matthew Lock
6

Dziwi mnie, że pod koniec 2018 roku nie mogłem znaleźć wartościowego rozwiązania. Sama wymyśliłem rozwiązanie Bootstrap 3 za pomocą Flexboksa.

Czysty i prosty przykład:

Przykład dopasowanych szerokości kolumn w Bootstrap 3

HTML

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

CSS

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

Zobacz działające demo: http://jsfiddle.net/5kmtfrny/

BuffMcBigHuge
źródło
5

Wiem, że się spóźniam, ale teraz możesz użyć atrybutu stylu „minimalna wysokość”, aby osiągnąć swój cel.

Faiz
źródło
5

Jeśli ktoś używa bootstrap 4 i szuka kolumn o równej wysokości, wystarczy użyć row-eq-heightdiv div

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
</div>

Patrz: http://getbootstrap.com.vn/examples/equal-height-columns/

Znaneswar
źródło
3

oto moje rozwiązanie (skompilowany CSS):

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

Twój kod wyglądałby następująco:

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

Zasadniczo jest to ten sam system, którego używasz z .col-*klasami, z tą różnicą, że musisz zastosować .row-*klasy do samego wiersza.

Z .row-sm-eqkolumnami zostaną ułożone na ekranach XS. Jeśli nie potrzebujesz ich ustawiać na dowolnych ekranach, których możesz użyć .row-xs-eq.

Używana przez nas wersja SASS:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

Demo na żywo


Uwaga: mieszanie .col-xs-12i .col-xs-6wewnątrz jednego wiersza nie działałoby poprawnie.

Alexander S.
źródło
To jest dobre. Moje rozwiązanie jest takie samo. Istnieje również możliwość posiadania kolumn o jednakowej wysokości ze standardowymi 30-pikselowymi przerwami Bootstrap między kolumnami z border-spacingmarginesami ujemnymi i ujemnymi.
maks.
3

Wystąpił problem z użyciem rozwiązania 1 podczas nakładania go tylko na kolumnę w wierszach. Chciałbym ulepszyć rozwiązanie 1.

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

(Przepraszamy, nie mogę komentować odpowiedzi Popnoodles. Nie mam wystarczającej reputacji)

Станислав Пономарев
źródło
2

Najlepiej tam:

Odruch Github - Dokumenty

Działa z bootstrap

Aktualizacja:

  1. Uwzględnij CSS
  2. Zaktualizuj swój kod:

/*!
 *
 * Reflex v1.0
 *
 * Reflex is a flexbox grid which provides a way to take advantage of emerging
 * flexbox support while providing a fall back to inline-block on older browsers
 *
 * Built by Lee Jordan G.C.S.E.
 * email: [email protected]
 * github: https://github.com/leejordan
 *
 * Structure and calculations are inspired by twitter bootstrap
 *
 */
.reflex-order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}
.reflex-order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}
.reflex-order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}
.reflex-order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}
.reflex-order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}
.reflex-order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}
.reflex-order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}
.reflex-order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}
.reflex-order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.reflex-order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
.reflex-order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.reflex-order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.reflex-order-0 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
.reflex-container {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
  list-style-type: none;
}
.reflex-container *,
.reflex-container:before,
.reflex-container:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
}
.reflex-container *:before,
.reflex-container *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*="reflex-col-"] {
  width: 100%;
  vertical-align: top;
  position: relative;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  text-align: left;
  text-align: start;
}
.reflex-item {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .reflex-item {
  width: 100%;
}
.reflex-col-12 {
  width: 100%;
  *width: 99.9%;
}
.reflex-col-11 {
  width: 91.66666666666666%;
  *width: 91.56666666666666%;
}
.reflex-col-10 {
  width: 83.33333333333334%;
  *width: 83.23333333333335%;
}
.reflex-col-9 {
  width: 75%;
  *width: 74.9%;
}
.reflex-col-8 {
  width: 66.66666666666666%;
  *width: 66.56666666666666%;
}
.reflex-col-7 {
  width: 58.333333333333336%;
  *width: 58.233333333333334%;
}
.reflex-col-6 {
  width: 50%;
  *width: 49.9%;
}
.reflex-col-5 {
  width: 41.66666666666667%;
  *width: 41.56666666666667%;
}
.reflex-col-4 {
  width: 33.33333333333333%;
  *width: 33.23333333333333%;
}
.reflex-col-3 {
  width: 25%;
  *width: 24.9%;
}
.reflex-col-2 {
  width: 16.666666666666664%;
  *width: 16.566666666666663%;
}
.reflex-col-1 {
  width: 8.333333333333332%;
  *width: 8.233333333333333%;
}
@media (min-width: 480px) {
  .reflex-col-xs-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-xs-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-xs-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-xs-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-xs-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-xs-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-xs-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-xs-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-xs-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-xs-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-xs-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-xs-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 768px) {
  .reflex-col-sm-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-sm-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-sm-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-sm-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-sm-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-sm-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-sm-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-sm-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-sm-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-sm-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-sm-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-sm-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 992px) {
  .reflex-col-md-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-md-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-md-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-md-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-md-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-md-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-md-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-md-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-md-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-md-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-md-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-md-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 1200px) {
  .reflex-col-lg-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-lg-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-lg-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-lg-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-lg-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-lg-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-lg-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-lg-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-lg-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-lg-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-lg-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-lg-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
.reflex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.reflex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.reflex-direction-row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.reflex-direction-column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.reflex-direction-column-reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.reflex-align-start {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.reflex-align-end {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.reflex-align-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-center {
  -webkit-align-items: center;
  align-items: center;
}
.reflex-align-center [class*="reflex-col-"] {
  vertical-align: middle;
}
.reflex-align-baseline {
  -webkit-align-items: baseline;
  align-items: baseline;
}
.reflex-align-baseline [class*="reflex-col-"] {
  vertical-align: baseline;
}
.reflex-align-content-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.reflex-align-content-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.reflex-align-content-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-content-center {
  -webkit-align-content: center;
  align-content: center;
}
.reflex-align-content-space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}
.reflex-align-content-space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}
.reflex-align-self-stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}
.reflex-align-self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.reflex-align-self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}
.reflex-align-self-center {
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}
.reflex-align-self-baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}
.reflex-justify-start {
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.reflex-justify-end {
  text-align: right;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.reflex-justify-center {
  text-align: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.reflex-justify-space-between {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.reflex-justify-space-around {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.reflex-item-margin-sm {
  margin: 0 0.25em 0.5em;
}
.reflex-item-margin-md {
  margin: 0 0.5em 1em;
}
.reflex-item-margin-lg {
  margin: 0 1em 2em;
}
.reflex-item-content-margin-sm * {
  margin-right: 0.25em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-md * {
  margin-right: 0.5em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-lg * {
  margin-right: 1em;
  margin-left: 1em;
}
.reflex-img {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.reflex-item-footer {
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reflex-container reflex-wrap">
  <div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg">
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>

öbl
źródło
Witamy w Stack Overflow! Chociaż ten link może odpowiedzieć na pytanie, lepiej dołączyć tutaj istotne części odpowiedzi i podać link w celach informacyjnych. Odpowiedzi zawierające tylko łącze mogą stać się nieprawidłowe, jeśli połączona strona ulegnie zmianie. Zobacz Jak napisać dobrą odpowiedź .
ByteHamster
2

Oto moja metoda, użyłem Flex z pewnymi zmianami w zapytaniu o media.

  @media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

następnie dodano wymagane klasy do rodzica.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

Używam responsywnych punktów przerwania, ponieważ flux zwykle utrudnia standardową responsywną naturę bootstrap.

Ajay Sathish
źródło
2

Używam tego bardzo łatwego rozwiązania clearfix, które nie ma żadnych skutków ubocznych.

Oto przykład na AngularJS:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

I jeszcze jeden przykład na PHP:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>
Oleg
źródło
Nie sprawia to jednak, że kolumny mają taką samą wysokość.
skerit
1
Dla mnie, chcąc mieć kolumny na tej samej wysokości / miejscu w rzędzie, jest to rozwiązanie
Michał - wereda-net
2

Dla tych, którzy szukają szybkiego i łatwego rozwiązania - jeśli masz stosunkowo spójny zestaw zawartości bloku, ustawienie minimalnej wysokości div, która jest nieco większa niż największy blok, może być łatwiejsze do wdrożenia.

.align-box {
    min-height: 400px;
}
Neal
źródło
2

.row.container-height {
	overflow: hidden; 
}

.row.container-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

gdzie .container-height to klasa stylu, którą należy dodać do elementu w stylu .row, do którego wszystkie jego dzieci .col * mają tę samą wysokość.

Zastosowanie tych stylów tylko do określonego pliku .row (z .container-height, jak w przykładzie) pozwala również uniknąć zastosowania marginesu i przepełnienia wypełnienia do wszystkich plików .col *.

DarkScrolls
źródło
2

Szukałem rozwiązania tego samego problemu i znalazłem, że po prostu działa !! - prawie bez dodatkowego kodu ..

zobacz https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27, aby uzyskać dobre porozumienie, a także odpowiedź na dole, z linkiem.

https://www.codeply.com/go/EskIjvun4B

był to dla mnie właściwy, responsywny sposób ... cytat: ... 3 - Użyj Flexboksa (najlepiej!)

Od 2017 roku najlepszym (i najłatwiejszym) sposobem na stworzenie kolumn o równej wysokości w responsywnym projekcie jest użycie Flexbox CSS3.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

i po prostu użyj:

div class="container">
   <div class="row display-flex .... etc..
kfn
źródło
1
@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

Przykład:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

Na podstawie kilku odpowiedzi tutaj. Odpowiedzi na Flexboksa są właściwe, gdy IE8 i 9 nie żyją, a gdy Android 2.x nie żyje, ale nie jest to prawdą w 2015 r. I prawdopodobnie nie będzie w 2016 r. IE8 i 9 nadal tworzą 4- 6% zużycia w zależności od sposobu pomiaru, a dla wielu użytkowników korporacyjnych jest znacznie gorzej. http://caniuse.com/#feat=flexbox

display: table, display: table-cellSztuką jest bardziej kompatybilny wstecz - i jedną wielką rzeczą jest jedynym poważnym problemem jest kwestia kompatybilności Safari, gdzie siły box-sizing: border-box, coś już stosowany do tagów Bootstrap. http://caniuse.com/#feat=css-table

Możesz oczywiście dodać więcej klas, które robią podobne rzeczy, na przykład .equal-height-md. Przywiązałem je do div, aby uzyskać niewielką korzyść z wydajności w moim ograniczonym użyciu, ale możesz usunąć tag, aby uczynić go bardziej uogólnionym, podobnie jak reszta Bootstrap.

Zauważ, że jsfiddle tutaj używa CSS, a więc rzeczy, które inaczej zapewniłby Less, są zakodowane na stałe w połączonym przykładzie. Na przykład @ screen-sm-min został zastąpiony tym, co wstawiłby Less - 768px.

Chris Moschini
źródło
1

Jeśli ma to sens w twoim kontekście, możesz po prostu dodać pusty 12-kolumnowy div po każdej przerwie, co działa jak dzielnik, który obejmuje dolną część najwyższej komórki w rzędzie.

<div class="row">
   <div class="col-xs-6">Some content</div>
   <div class="col-xs-6">
      Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! 
   </div>
   <div id="spacer-div" class="col-xs-12"></div>
   <div class="col-xs-6">More content...</div>
</div><!--this You forgot to close -->

Mam nadzieję że to pomoże!

Chris Staikos
źródło
To nie odpowiada na pytanie, które zadał!
Ellisan
0

Pomyślałem tylko, że odpowiedź udzielona przez Dr.Flink może być również zastosowana do form-horizontalbloku Bootstrap 3 - co może być bardzo przydatne, jeśli chcesz użyć kolorów tła dla każdej komórki. Aby działało to w przypadku formularzy ładowania początkowego, należy owinąć zawartość formularza, która służy tylko do replikacji struktury podobnej do tabeli.

Poniższy przykład przedstawia również CSS, który pokazuje dodatkowe zapytanie o media, które pozwala Bootstrapowi 3 po prostu przejąć i zrobić to normalnie na mniejszych ekranach. Działa to również w IE8 +.

Przykład:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>
.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}
JoeTidee
źródło
0

Spróbuj to zrobić za pośrednictwem Flex-Box

.container {
	display: flex;
	padding-bottom: 50px;
}
.col {
	background: blue;
	padding: 30px;
}

.col.center {
	background: red;
	height: 100px;
	margin-bottom: -50px;
}
<div class="container">
  <div class="col">Left</div>
  <div class="col center">Center</div>
  <div class="col">Right</div>
</div>

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

grinmax
źródło
0

Tak, tak, Bootstrap 4 sprawia, że ​​wszystkie kolumny w rzędzie mają taką samą wysokość, jednak jeśli tworzysz ramkę wokół zawartości wewnątrz wiersza, może się okazać, że wygląda na to, że cols nie są równe wysokości!

Kiedy zastosowałem height: 100%do elementu wewnątrz kolumny, stwierdziłem, że straciłem margines.

Moim rozwiązaniem jest użycie paddingu na div cola (zamiast marginesu na elemencie wewnętrznym). Tak jak:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

Powyższy przykład kodu wykorzystuje Bootstrap 4.1 do utworzenia zestawu dziewięciu ramek z ramką

Dagmar
źródło
0

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 option2">
            <p>left column </p>
            <p>The first column has to be the longest The first column has to be the longes</p>
        </div>

        <div class="span4 option2">
            <p>middle column</p>
        </div>

        <div class="span4 option2">
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
        </div>
    </div>
</div>

CSS

.option2 { background: red; border: black 1px solid; color: white; }

JS

$('.option2').css({
    'height': $('.option2').height()
});
Pacific P. Regmi
źródło
0

19.03.2019

** Rozwiązanie Bootstrap 4 o jednakowej wysokości **

Bootstrap Utilities / flex dla równej wysokości

Przykład na żywo w Codepen

Równa wysokość według klasy bootstrap z ustalonym div macierzystym heightlubmin-height

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

MD Ashik
źródło
3
Dlaczego dajesz mi głos negatywny? czy możesz zrobić dla niego komentarz?
MD Ashik
-1

Możesz zawinąć kolumny w div

<div class="row">
<div class="col-md-12>
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>
</div>
Tom Kur
źródło
Nie działało dla mnie z przyciskiem w jednej z kolumn.
Ray Hunter,