Saya tidak yakin apakah bungkus adalah kata yang tepat, tetapi saya memiliki kolom yang bisa sangat panjang. Dan saya ingin itu membungkus ke set kolom berikutnya ketika mencapai akhir div.

Apa yang saya inginkan:

col-3 col-3 a
a     a     a
a     a     a 
a     a     col-3
a     a     a
______________ end of div

Saya ingin col-3 kedua untuk membungkus ukuran col-3 pertama, pada akhirnya memiliki 2 kolom dengan ukuran yang sama dan satu dengan apa yang tersisa setelah panjang diisi.

Apa yang saya miliki saat ini:

col-3 col-3 col-3
a     a     a
a     a     
a     a     
a     a 
      a
      a
      a
      a    
______________ end of div

Kode saya:

<div className="container">
      <h2>{listing.name}</h2>
      <div className="row">
        <div className="col-md-6">
          <SlickAll />
            <ul>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
            </ul>


        </div>
        <div className="col-md-3 mh-100">
          <ul className="list-group">
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
          </ul>
        </div>

        <div className="col-md-3 mh-100">
          <ul className="list-group">
             <li>asd </li>
          </ul>
        </div>
      </div>
    </div>
0
Link 28 Oktober 2019, 17:10

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan bungkus kolom flexbox, dan membatasi tinggi kolom sisi kanan dengan menempatkannya dalam wadah position:absolute...

   <div class="row my-3 mx-auto">
        <div class="col-md-6">
            <ul class="list-group">
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                ...
            </ul>
        </div>
        <div class="col-md">
            <div class="position-absolute w-100 h-100">
                <ul class="list-group d-flex flex-column flex-wrap mh-md-100">
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                    ...
                    <li>listend</li>
                </ul>
            </div>
        </div>
    </div>

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

Satu-satunya CSS tambahan adalah membuat ketinggian maksimum berfungsi secara responsif. Ini memungkinkan kolom untuk ditumpuk secara vertikal pada layar yang lebih kecil (kurang dari md lebar)...

@media (min-width: 768px) {
    .mh-md-100 {
        max-height: 100%;
    }
}
1
Zim 28 Oktober 2019, 15:03