Pertanyaan Bagaimana saya bisa membuat semua kolom Bootstrap sama tingginya?


Saya menggunakan Bootstrap. Bagaimana saya bisa membuat tiga kolom dengan tinggi yang sama?

Berikut adalah tangkapan layar masalah. Saya ingin kolom biru dan merah memiliki tinggi yang sama dengan kolom kuning.

Three bootstrap columns with the center column longer than the other two columns

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


777
2017-10-30 23:31


asal


Jawaban:


Solusi 1 menggunakan margin negatif (tidak merusak respons) 

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

884
2017-10-30 23:38



Perbarui 2018

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 contoh flexbox tinggi

Untuk hanya menerapkan flexbox ketinggian yang sama pada breakpoint tertentu (responsif), gunakan kueri media. Sebagai contoh, ini dia sm(768px) dan ke atas:

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

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

Solusi lainnya

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

1) Menggunakan margin & padding negatif yang sangat besar

2) Menggunakan display: tabel-sel (solusi ini juga mempengaruhi grid responsif, sehingga kueri @media dapat digunakan untuk hanya berlaku table ditampilkan di layar yang lebih lebar sebelum kolom menumpuk secara vertikal)


Bootstrap 4

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


216
2018-04-06 10:25



Tidak diperlukan JavaScript. Cukup tambahkan kelas .row-eq-height untuk yang ada .row seperti 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 baru div.row.row-eq-height masing-masing 12 kolom.

Kiat: Anda mungkin perlu menambahkan

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

ke html Anda


78
2018-04-29 10:40



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

Screenshot of Codepen

Untuk menambahkan dukungan untuk konten thumbnail yang fleksibel dalam kolom fleksibel seperti screenshot di atas juga menambahkan ini ... Catatan Anda bisa melakukannya dengan panel juga: 

.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 Anda dapat menggunakan demo dengan fallback menggunakan tag kondisional dengan sesuatu seperti kisi javascript sebagai polyfill:

<!--[if lte IE 9]>

<![endif]-->

Adapun dua contoh lainnya dalam jawaban yang diterima ... Demo tabel adalah ide yang layak tetapi sedang dilaksanakan salah. Menerapkan CSS itu pada kelas-kelas kolom bootstrap secara khusus tanpa keraguan akan memecah kerangka grid sepenuhnya. Anda harus menggunakan pemilih khusus untuk satu dan dua gaya tabel tidak seharusnya diterapkan [class*='col-'] yang telah menentukan lebar. Metode ini HANYA digunakan jika Anda menginginkan tinggi yang sama dan lebar kolom yang sama. Ini tidak dimaksudkan untuk layout lain dan TIDAK responsif. Namun, kami dapat membuatnya mundur di layar 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 dari 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 kontainer. Jadi ini juga akan merusak respons karena kolom tidak meluas ke elemen di sampingnya, tetapi seluruh penampung. Metode ini juga tidak akan memungkinkan Anda untuk menerapkan margin bawah ke baris lebih lama dan juga akan menyebabkan masalah lain di sepanjang jalan seperti menggulir ke tag anchor.

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


46
2017-12-20 12:48



Anda hanya menampilkan satu baris sehingga kasus penggunaan Anda mungkin terbatas hanya untuk itu. Hanya jika Anda memiliki beberapa baris, plugin ini - github Javascript-grid - Bekerja dengan sempurna! Itu membuat setiap panel meluas ke panel tertinggi, memberikan setiap baris berpotensi ketinggian yang berbeda berdasarkan panel tertinggi di baris itu. Ini adalah solusi jquery vs css, tetapi ingin merekomendasikannya sebagai pendekatan alternatif.


38
2017-11-19 17:47



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

24
2018-02-26 21:03



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

Dari:

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


8
2017-11-10 18:21



Anda dapat menggunakan inline-flex juga yang bekerja 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 ketinggian yang sama sehingga perbatasan akan terlihat bergerigi. Untuk ini saya membuat kelas css sederhana.

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

7
2018-05-12 19:26



solusi jquery curang jika ada yang tertarik. Pastikan saja semua cols Anda (el) memiliki classname umum ... bekerja secara responsif juga jika Anda mengikatnya ke $ (window).

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 mengatur ketinggian tertinggi terakhir dalam $.each() fungsi


7
2017-08-25 06:15