Bagaimana saya bisa membuat kolom Bootstrap sama tingginya?


965

Saya menggunakan Bootstrap. Bagaimana saya bisa membuat tiga kolom sama tingginya?

Ini adalah screenshot dari masalahnya. Saya ingin kolom biru dan merah sama tingginya dengan kolom kuning.

Tiga kolom bootstrap dengan kolom tengah lebih panjang dari dua kolom lainnya

Ini kodenya:

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



11
Ada artikel di situs web bootstrap dengan solusi 5-baris getbootstrap.com.vn/examples/equal-height-columns
Eduard Gamonal

2
Contoh tentang Bootstrap memecah responsif Eduard. Flex .rowtidak ada flex-wrap: wrap;. Berikut ini contohnya yang bekerja dengan responsif: codepen.io/bootstrapped/details/RrabNe
Bryan Willis

Kemungkinan Solusi - Gambar transparan 1 piksel lebar di kolom lainnya. Gambar lebar satu piksel baru ini cocok dengan tinggi piksel pic kucing dalam contoh di atas. (Mungkin tidak bekerja atau praktis dalam situasi Anda)
Sql Surfer

Dalam Bootstrap 4, kita dapat menggunakan kartu untuk hal yang sama
Amjad Rehman A

Jawaban:


1045

Solusi 4 menggunakan Bootstrap 4

Bootstrap 4 menggunakan Flexbox sehingga tidak perlu untuk CSS tambahan.

Demo

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

Solusi 1 menggunakan margin negatif (tidak merusak responsif)

Demo

.row{
    overflow: hidden; 
}

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

Solusi 2 menggunakan tabel

Demo

.row {
    display: table;
}

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

Solusi 3 menggunakan flex ditambahkan Agustus 2015. Komentar yang diposting sebelum ini tidak berlaku untuk solusi ini.

Demo

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

7
Anggap saja kolom yang tersedot ke ruang negatif. Jika Anda menghapus overflow, Anda akan melihat apa yang terjadi.
Popnoodles

9
Jika menargetkan kelas kolom bootstrap khusus Anda mungkin harus menggunakan jangkar ^ bukan wildcard *. Menggunakan ^ akan mengatakan bahwa kelas harus dimulai dengan col- mana karena wildcard yang ditunjukkan akan cocok dengan kelas mana saja dengan col- di mana saja dalam string, mungkin memiliki efek yang tidak diinginkan pada gaya di mana Anda mungkin telah menggunakan konvensi col-. (Yaitu barang-col-morestuff).
Logan G.

7
Jawaban yang bagus, dengan beberapa peringatan. Solusi 1 menonaktifkan float dan karenanya merusak perilaku responsif bootstrap grid. Solusi 2 (dijelaskan lebih dalam di positioniseverything.net/articles/onetruelayout/equalheight ) tidak menunjukkan batas bawah (seperti yang terpotong di suatu tempat di ruang pengisi).
Ohad Schneider

14
Solusi 3 memecah respons baris.
SPRBRN

10
@Popnoodles Anda harus menambahkan flex-wrap: wrap;contoh ketiga untuk mengaktifkan daya tanggap. Anda juga ingin menambahkan tampilan: flex; arah fleksibel: kolom; ke kelas kolom. Jika Anda akan menggunakan .row dan bukan kelas khusus, Anda harus menyediakan opsi mundur untuk peramban yang lebih lama mengubah kembali tampilan. Ini sebuah contoh
Bryan Willis

321

Perbarui 2020

Pendekatan terbaik untuk Bootstap 3.x - menggunakan CSS flexbox (dan membutuhkan CSS minimal) ..

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

Bootstrap sama dengan tinggi flexbox

Untuk hanya menerapkan flexbox ketinggian yang sama di breakpoints spesifik (responsif), gunakan kueri media. Misalnya, di sini sm(768px) dan lebih tinggi:

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

Solusi ini juga berfungsi dengan baik untuk beberapa baris (pembungkus kolom):
https://www.bootply.com/gCEXzPMehZ

Penanganan lainnya

Opsi-opsi ini akan direkomendasikan oleh orang lain, tetapi bukan ide yang baik untuk desain responsif. Ini hanya berfungsi untuk tata letak baris tunggal tanpa pembungkus kolom.

1) Menggunakan margin negatif besar & padding

2) Menggunakan display: table-cell (solusi ini juga memengaruhi grid responsif, sehingga permintaan @media dapat digunakan untuk hanya menerapkan tabletampilan pada layar yang lebih luas sebelum kolom menumpuk secara vertikal)


Bootstrap 4

Flexbox sekarang digunakan secara default di Bootstrap 4 sehingga tidak perlu CSS tambahan untuk membuat kolom dengan tinggi yang sama: http://www.codeply.com/go/IJYRI4LPwU

Contoh:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

5
Anda dapat menggunakan kueri media untuk hanya menerapkan flexbox pada perangkat yang lebih besar / lebih luas. Saya memperbarui bootply: bootply.com/Cn6fA6LuTq
Zim

Jika ada yang tertarik, saya telah membuat pena untuk menunjukkan efek serupa pada formulir menggunakan flexbox.
Justin Lau

2
Ini adalah bug Safari yang dikenal dengan flexbox: proof: bugs.webkit.org/show_bug.cgi?id=137730
Zim

5
@Stanley komentar tentang "tidak lagi responsif" sudah tua dan tidak relevan.
Zim

1
Ini adalah satu-satunya perbaikan yang berhasil untuk saya. Terima kasih Zim, ini hebat!
Ryan NZ

83

Tidak perlu JavaScript. Cukup tambahkan kelas .row-eq-heightke yang sudah ada .rowseperti ini:

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

Kiat: jika Anda memiliki lebih dari 12 kolom di baris Anda, kisi bootstrap akan gagal membungkusnya. Jadi tambahkan yang barudiv.row.row-eq-height setiap 12 kolom baru.

Kiat: Anda mungkin perlu menambahkan

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

ke html Anda


5
berbasis flexbox. Tidak berfungsi di IE8 atau 9, juga Android 2.x caniuse.com/#feat=flexbox
Chris Moschini

60
Catatan: getbootstrap.vn bukan "Bootstrap". Ini adalah proyek pihak ke-3.
Zim

Ini tampaknya terintegrasi dalam bootstrap v4.
Cyril Duchon-Doris

Saya menyertakan CSS yang benar (dari situs .vn) tetapi mengacaukan semuanya. ini didasarkan pada flex
ekkis

Hebat ... plugin neraka.
Armada

63

Untuk menjawab pertanyaan Anda, inilah yang perlu Anda lihat demo responsif penuh dengan prefiks 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;
    }
}

Cuplikan layar Codepen

Untuk menambahkan dukungan untuk flex konten thumbnail dalam kolom flex seperti screenshot di atas juga tambahkan ini ... Catatan Anda juga dapat melakukan ini dengan panel:

.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%;
}

Sementara flexbox tidak berfungsi di IE9 dan di bawah ini Anda dapat menggunakan demo dengan mundur menggunakan tag kondisional dengan sesuatu seperti javascript kisi sebagai polyfill:

<!--[if lte IE 9]>

<![endif]-->

Adapun dua contoh lainnya dalam jawaban yang diterima ... Tabel demo adalah ide yang layak tetapi sedang dilaksanakan salah. Menerapkan CSS pada kelas-kelas kolom bootstrap secara khusus tanpa ragu akan memecah kerangka kerja grid sepenuhnya. Anda harus menggunakan pemilih khusus untuk satu dan dua gaya tabel tidak boleh diterapkan pada [class*='col-']lebar yang telah ditentukan. Metode ini HANYA harus digunakan jika Anda menginginkan tinggi yang sama DAN kolom dengan lebar yang sama. Ini tidak dimaksudkan untuk tata letak lain dan TIDAK responsif. Namun kami dapat membuatnya mundur pada tampilan seluler ...

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

Terakhir, demo pertama dalam jawaban yang diterima yang mengimplementasikan versi satu tata letak yang benar adalah pilihan yang baik untuk beberapa situasi, tetapi tidak cocok untuk kolom bootstrap. Alasan untuk ini adalah bahwa semua kolom meluas ke ketinggian wadah. Jadi ini juga akan memecah respons karena kolom tidak meluas ke elemen di sebelahnya, tetapi seluruh wadah. Metode ini juga tidak akan memungkinkan Anda untuk menerapkan margin bawah ke baris lebih lama dan juga akan menyebabkan masalah lain seperti menggulir ke tag jangkar.

Untuk kode lengkap, lihat Codepen yang secara otomatis mengawali kode flexbox.


11
Itulah satu-satunya jawaban yang benar-benar bekerja untuk saya. 3 jawaban teratas hanya membuang-buang waktu
ken2k

3
Kelihatannya bagus, tapi sayangnya itu tidak berfungsi di Safari 9.1 di MacOS :-(
KevinH

1
@TheSchecke di sini adalah perbaikannya. Sejauh yang saya tahu ini berfungsi di semua browser yang didukung flexbox sekarang. Tolong beri tahu saya jika saya salah. s.codepen.io/bootstrapped/debug/pboJNd . Masalahnya berkaitan dengan row:after, row:beforetampilan memiliki: set tabel yang tampaknya Safari tidak suka.
Bryan Willis

2
Hanya kepala bahwa ini benar-benar rusak pada browser Safari iPad
Matthew Lock

1
Maaf mendengar @MatthewLock. Saya baru saja menguji IPad Air iOS 8.1 saya dengan safari terbaru dan berhasil. Saya juga bisa mengujinya di crossbrowsertesting.com menggunakan iPad mini retina dengan Safari 7 dan yang tampaknya bekerja dengan baik juga. Inilah hasil tes itu. Bisakah Anda memberikan versi iPad dan Safari yang Anda gunakan? Saya ingin mencoba memperbaiki masalah ini secepatnya atau setidaknya memberikan komentar karena saya tahu banyak orang yang menggunakannya.
Bryan Willis

42

Anda hanya menampilkan satu baris sehingga use case Anda mungkin terbatas hanya untuk itu. Jika Anda memiliki beberapa baris, plugin ini - github Javascript-grids - berfungsi dengan sempurna! Itu membuat setiap panel meluas ke panel tertinggi, memberikan setiap baris berpotensi ketinggian berbeda berdasarkan panel tertinggi di baris itu. Ini adalah solusi jquery vs css, tetapi ingin merekomendasikannya sebagai pendekatan alternatif.


1
Satu-satunya solusi yang benar-benar berfungsi dan tidak merusak daya tanggap
Artur Kędzior

Apakah ini memungkinkan Anda untuk menentukan bahwa kolom harus persegi - atau hanya semua sama tingginya?
niico

@ niico 14 - sudah lama sejak saya sudah menggunakan ini, tetapi dalam aplikasi saya persyaratannya adalah bahwa elemen-elemen di setiap baris sama tinggi, tetapi tingginya mungkin bervariasi dari baris ke baris. Karena ketinggian adalah fungsi dari elemen dalam baris, jika tinggi elemen Anda sama dengan lebar mereka, maka mereka harus hadir sebagai kotak.
globalSchmidt

30

Jika Anda ingin membuat ini berfungsi di browser apa pun, gunakan javascript:

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

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

    $(".panel").height(maxHeight);
});

1
Memiliki satu div class = "baris" dengan jumlah variabel panel masing-masing kelas "col-md-4" yang seharusnya memberi saya 3 kolom dan jumlah baris yang tidak diketahui, tergantung pada jumlah item yang ingin saya daftarkan. JS ini berfungsi dan membutuhkan sedikit perubahan dalam HTML / CSS saya, sebagai lawan dari berbagai hal CSS yang saya coba. Satu-satunya hal yang saya ubah adalah menandai semua panel kolom saya dengan kelas tambahan, yaitu "panel-sama-tinggi" dan kemudian gunakan $ (". Panel-sama-tinggi") daripada $ (". Panel")
nidalpres

1
Satu-satunya solusi yang bekerja untuk saya setelah satu hari bereksperimen dengan barang css
Dinosaurius

1
Ini adalah solusi yang baik, tetapi .ready()bukan waktu yang tepat untuk menyebutnya - itu harus dipanggil.load()
jave.web

1
@ jave.web Jika Anda berpikir bahwa ini adalah solusi yang baik, tolong berikan jempol. Terima kasih
paulalexandru

Gunakan window.onload = function() {...function content above...}sebagai gantinya. Ini bekerja lebih baik.
Blackpanther0001

10

Saya mencoba banyak saran yang dibuat di utas ini dan di halaman lain tetapi tidak ada solusi yang bekerja 100% di setiap browser.

Jadi saya bereksperimen cukup lama dan menghasilkan ini. Solusi lengkap untuk kolom Bootstrap Equal Height dengan bantuan flexbox dengan hanya 1 kelas. Ini berfungsi di semua browser utama 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>

Untuk mendukung lebih banyak versi IE, Anda dapat, misalnya, menggunakan https://github.com/liabru/jquery-match-height dan menargetkan semua kolom anak dari .equal-cols. Seperti ini:

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

Tanpa polyfill ini kolom akan berperilaku seperti kolom Bootstrap biasa sehingga merupakan fallback yang cukup bagus.


Ini bekerja dengan baik untuk saya. Terima kasih!
Randlet

8

Anda dapat menggunakan inline-flex juga yang berfungsi cukup baik dan mungkin sedikit lebih bersih daripada memodifikasi setiap elemen baris dengan CSS.

Untuk proyek saya, saya ingin setiap baris yang elemen anak-anak memiliki batas sama tingginya sehingga perbatasan akan terlihat bergerigi. Untuk ini saya membuat kelas css sederhana.

.row.borders{
    display: inline-flex;
    width: 100%;
}

2
Sementara itu berhasil membuat semua konten di baris sama tinggi; Ini memecah respons Bootstrap.
Christine268


7

solusi jquery nakal jika ada yang tertarik. Pastikan semua cols Anda (el) memiliki nama kelas yang sama ... berfungsi juga secara responsif jika Anda mengikatnya ke $ (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});
    });
}

Pemakaian

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

Catatan: Posting ini telah diedit sesuai komentar @Chris bahwa kode hanya menetapkan ketinggian tertinggi terakhir dalam $.each()fungsi


Ini dikecilkan - sederhana dan kecil namun akan mengubah ukuran semua kolom tanpa harus memiliki jumlah kolom yang tetap dalam satu baris. Yang bagus!
Jordon

1
Ini tidak berfungsi, karena Anda menetapkan ketinggian terbesar terakhir di setiap fungsi. Jika kolom ketiga adalah kolom tertinggi, kolom 1 dan 2 tidak mendapatkan ketinggian yang tepat .. Anda harus menetapkan baris terakhir "$ (ini) .css ({'height': h});" setelah masing-masing fungsi. Saya akan melakukan edit.
Chris

7

Beberapa jawaban sebelumnya menjelaskan cara membuat divs sama tinggi, tetapi masalahnya adalah ketika lebar terlalu sempit divs tidak akan menumpuk, karena itu Anda dapat menerapkan jawaban mereka dengan satu bagian tambahan. Untuk masing-masing Anda dapat menggunakan nama CSS yang diberikan di sini sebagai tambahan dari kelas baris yang Anda gunakan, jadi div akan terlihat seperti ini jika Anda selalu ingin div tersebut bersebelahan:

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

Untuk semua layar:

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

Untuk saat Anda ingin menggunakan 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;
    }
}

Untuk saat Anda ingin 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;
    }
}

Untuk saat Anda ingin menggunakan 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;
    }
}

EDIT Berdasarkan komentar, memang ada solusi yang lebih sederhana, tetapi Anda harus memastikan untuk memberikan info kolom dari lebar terbesar yang diinginkan untuk semua ukuran hingga xs (misalnya <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;
}

Anda membuat itu jauh lebih rumit daripada yang Anda butuhkan :) `Cukup gunakan flex-wrap: wrap;maka Anda tidak perlu semua yang terpisah ... kecuali jika Anda secara khusus menginginkannya.
Bryan Willis

ini gagal di iPad Safari
Matthew Lock

6

Saya terkejut saya tidak dapat menemukan solusi yang berguna di sini pada akhir tahun 2018. Saya melanjutkan dan menemukan solusi Bootstrap 3 sendiri menggunakan flexbox.

Contoh bersih dan sederhana:

Contoh lebar kolom yang cocok di 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;
  }
}

Lihat demo yang berfungsi: http://jsfiddle.net/5kmtfrny/


5

Saya tahu saya sangat terlambat tetapi sekarang Anda dapat menggunakan atribut gaya "min-height" untuk mencapai tujuan Anda.


5

Jika ada yang menggunakan bootstrap 4 dan mencari kolom dengan tinggi yang sama gunakan row-eq-heightuntuk div induk

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

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


3

inilah solusi saya (kompilasi 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;
  }
}

Jadi kode Anda akan terlihat seperti:

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

Pada dasarnya ini adalah sistem yang sama yang Anda gunakan dengan .col-*kelas dengan perbedaan yang perlu Anda terapkan.row-* kelas ke baris itu sendiri.

Dengan .row-sm-eqkolom akan ditumpuk di layar XS. Jika Anda tidak membutuhkannya untuk ditumpuk di layar apa pun yang dapat Anda gunakan .row-xs-eq.

Versi SASS yang sebenarnya kami gunakan:

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


Catatan: mencampur .col-xs-12dan .col-xs-6di dalam satu baris tidak akan berfungsi dengan baik.


Ini bagus. Solusi saya sama. Dan ada kemungkinan memiliki tinggi kolom yang sama dengan 30px gap Bootstrap standar antara kolom yang menggunakan border-spacingdan margin negatif.
maks

3

Ada masalah dengan menggunakan Solusi 1 saat menerapkannya hanya pada kolom di baris. Ingin meningkatkan Solusi 1.

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

(Maaf, tidak dapat mengomentari jawaban Popnoodles. Saya tidak memiliki reputasi yang cukup)


2

Terbaik di luar sana:

Github reflex - Documents

Bekerja dengan bootstrap

Memperbarui:

  1. Sertakan CSS
  2. Perbarui kode Anda:

/*!
 *
 * 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: ldjordan@gmail.com
 * 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>


Selamat Datang di Stack Overflow! Meskipun tautan ini dapat menjawab pertanyaan, lebih baik untuk memasukkan bagian-bagian penting dari jawaban di sini dan memberikan tautan untuk referensi. Jawaban hanya tautan dapat menjadi tidak valid jika halaman tertaut berubah. Lihat Bagaimana cara menulis jawaban yang baik .
ByteHamster

2

Inilah metode saya, saya telah menggunakan flex dengan beberapa perubahan dalam permintaan 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;
  }
}

kemudian menambahkan kelas ke induk yang diperlukan.

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

Saya menggunakan breakpoint responsif karena fluks biasanya menghambat sifat responsif bootstrap standar.


2

Saya menggunakan solusi super mudah ini dengan clearfix , yang tidak memiliki efek samping.

Berikut ini adalah contoh di 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>

Dan satu lagi contoh di 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; ?>

Ini tidak membuat kolom Anda sama tingginya.
skerit

1
Bagi saya yang ingin memiliki kolom pada ketinggian / tempat yang sama berturut-turut, ini adalah solusi
Michal - wereda-net

2

Bagi mereka yang mencari solusi cepat dan mudah - jika Anda memiliki set konten blok yang relatif konsisten, setinggi minimum pada div yang sedikit lebih besar daripada blok terbesar dapat lebih mudah diimplementasikan.

.align-box {
    min-height: 400px;
}

2

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

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

di mana .container-height adalah kelas gaya yang harus ditambahkan ke elemen gaya .row dimana semua .col * anak-anaknya memiliki tinggi yang sama.

Menerapkan gaya ini hanya untuk beberapa .row tertentu (dengan .container-height, seperti dalam contoh) juga menghindari menerapkan margin dan padding overflow untuk semua .col *.


2

Saya mencari solusi untuk masalah yang sama, dan menemukan satu hanya berfungsi !! - dengan hampir tidak ada kode tambahan ..

lihat https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 untuk pencairan yang baik, dan dengan resposne yang Anda inginkan di bagian bawah, dengan tautan.

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

ini adalah cara responsif yang benar bagi saya ... kutipan: ... 3 - Gunakan flexbox (terbaik!)

Pada 2017, cara terbaik (dan termudah) untuk membuat kolom tinggi yang sama dalam desain responsif menggunakan CSS3 flexbox.

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

dan cukup gunakan:

div class="container">
   <div class="row display-flex .... etc..

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>

Contoh:

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

Diadaptasi dari beberapa jawaban di sini. Jawaban berbasis flexbox adalah cara yang benar setelah IE8 dan 9 mati, dan sekali Android 2.x mati, tetapi itu tidak benar pada tahun 2015, dan kemungkinan tidak akan pada 2016. IE8 dan 9 masih terdiri dari 4- 6% penggunaan tergantung pada bagaimana Anda mengukur, dan bagi banyak pengguna korporat, ini jauh lebih buruk. http://caniuse.com/#feat=flexbox

The display: table, display: table-celltrik ini lebih mundur-kompatibel - dan satu hal yang besar adalah masalah kompatibilitas hanya serius adalah masalah Safari mana pasukan box-sizing: border-box, sesuatu yang sudah diterapkan pada tag Bootstrap Anda. http://caniuse.com/#feat=css-table

Anda jelas dapat menambahkan lebih banyak kelas yang melakukan hal serupa, seperti .equal-height-md . Saya mengikat ini ke divs untuk manfaat kinerja kecil dalam penggunaan terbatas saya, tetapi Anda bisa menghapus tag untuk membuatnya lebih digeneralisasi seperti sisa Bootstrap.

Perhatikan bahwa jsfiddle di sini menggunakan CSS, dan, hal-hal yang sebaliknya akan disediakan oleh hard-coded dalam contoh yang ditautkan. Misalnya @ screen-sm-min telah diganti dengan yang akan dimasukkan Less - 768px.


1

Jika masuk akal dalam konteks Anda, Anda bisa menambahkan div 12 kolom kosong setelah setiap istirahat, yang bertindak sebagai pembagi yang memeluk bagian bawah sel tertinggi di baris Anda.

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

Semoga ini membantu!


Ini tidak menjawab pertanyaan yang dia tanyakan!
Ellisan

0

Saya pikir saya baru saja menambahkan bahwa jawaban yang diberikan oleh Dr.Flink juga dapat diterapkan pada Bootstrap 3 form-horizontal blok - yang bisa sangat berguna jika Anda ingin menggunakan warna latar belakang untuk setiap sel. Agar ini berfungsi untuk form bootstrap, Anda perlu membungkus konten form yang hanya berfungsi untuk mereplikasi struktur seperti tabel.

Contoh di bawah ini juga menyediakan CSS yang menunjukkan permintaan media tambahan yang memungkinkan Bootstrap 3 untuk mengambil alih dan melakukan hal yang normal pada layar yang lebih kecil. Ini juga berfungsi di IE8 +.

Contoh:

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

0

Coba ini lakukan melalui 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>

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


0

Jadi ya, Bootstrap 4 membuat semua cols dalam satu baris sama dengan tinggi, namun jika Anda membuat perbatasan di sekitar konten di dalam baris, Anda mungkin menemukan bahwa sepertinya cols bukan ketinggian yang sama!

Ketika saya menerapkan height: 100%elemen di dalam col saya menemukan bahwa saya kehilangan margin saya.

Solusi saya adalah dengan menggunakan bantalan pada div col (bukan margin pada elemen dalam). Seperti itu:

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

Contoh kode di atas menggunakan Bootstrap 4.1 untuk membuat satu set sembilan kotak dengan perbatasan


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()
});

0

03/19/2019

** Bootstrap 4 Solusi Tinggi Ketinggian **

Utilitas Bootstrap / fleksibel untuk ketinggian yang sama

Contoh langsung dalam Codepen

Tinggi yang sama dengan kelas bootstrap dengan div induk tetap heightataumin-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>


3
Mengapa Anda memberi saya Suara Negatif. dapatkah Anda memberikan komentar untuk itu?
MD Ashik

-1

Anda dapat membungkus kolom di dalam 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>

Tidak berfungsi untuk saya dengan tombol di salah satu kolom.
Ray Hunter
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.