Bagaimana saya bisa mendapatkan kolom Bootstrap untuk menjangkau beberapa baris?

158

Saya mencoba mencari cara melakukan kisi-kisi berikut dengan Bootstrap.

Saya tidak yakin bagaimana saya membuat kotak (nomor 1) yang membentang dua baris. Kotak-kotak tersebut dihasilkan secara terprogram sesuai dengan urutannya. Kotak 1 adalah pesan selamat datang.

masukkan deskripsi gambar di sini

Ada ide tentang cara terbaik untuk melakukannya?

css twitter-bootstrap James Jeffery
sumber
1
twitter.github.io/bootstrap/scaffolding.html#gridSystem , Anda dapat membuat sistem grid Bootstrap.
TheHippo
1
Jadi buat 2 baris, bukan 3, buat 2 baris di baris pertama? Ini bisa menjadi masalah ketika kotak dihasilkan secara terprogram.
James Jeffery
1
Tidak tahu apakah itu akan berhasil, tetapi apakah menambahkan pull-leftkelas ke semua kotak akan berhasil? itu tidak akan membuat kotak 1 sama tingginya dengan 2 + 4, tetapi itu akan membuatnya bekerja ketika Anda mengatur ketinggian.
Hailwood
Hailwood, masukkan itu sebagai jawaban jika Anda bisa, jika tidak saya akan menempelkan kode saya. Berhasil ... setidaknya di Chrome. Perlu mengujinya di browser lain.
James Jeffery
Infact @Hailwood, tidak ada tarikan ke kiri diperlukan. Hanya mengatur ketinggian pada karya elemen pertama.
James Jeffery

Jawaban:

164

Untuk Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>
Luaskan cuplikan

Untuk Bootstrap 2:

Tampilkan cuplikan kode

Lihat demo di JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

Mastergalen
sumber
Bagaimana Anda membuat kotak empat dan lima memenuhi tinggi baris ketika kotak satu tumbuh?
Imran NZ
2
stackoverflow.com/questions/19695784/…
Mastergalen
Ini adalah contoh yang tidak berfungsi, ujung bawah kolom pertama sedikit tidak sejajar dengan yang lainnya.
JackKalish
Ini adalah jawaban yang bagus, tetapi bagaimana jika kotak 5 perlu diperluas ke baris 3 juga, dan lebih-lebih, secara dinamis?
Misha'el
@ Misha'el Itu cukup sederhana, lakukan saja apa yang dia lakukan untuk kotak 1 dan terapkan ke kotak 3/5. Seharusnya ada 3 kolom dengan ukuran yang sama, yang di luar hanya akan berisi 1 baris, satu di dalam dua baris.
Nathan Williams
17

Seperti komentar yang disarankan, solusinya adalah menggunakan bentang / baris bersarang.

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>
disrvptor
sumber
1

Contoh di bawah ini sepertinya berhasil. Hanya mengatur ketinggian pada elemen pertama

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

Saya tidak bisa membantu tetapi berpikir itu adalah penggunaan baris yang salah.

James Jeffery
sumber
1

Saya percaya bagian tentang bagaimana merentangkan baris telah dijawab secara menyeluruh (yaitu dengan bersarang baris), tetapi saya juga mengalami masalah baris bersarang saya tidak mengisi wadah mereka. Sementara flexbox dan margin negatif adalah pilihan, solusi yang jauh lebih mudah adalah dengan menggunakan h-50kelas yang telah ditentukan pada rowkotak yang berisi 2, 3, 4, dan 5.

Catatan: Saya menggunakan Bootstrap-4, saya hanya ingin berbagi karena saya mengalami masalah yang sama dan menemukan ini menjadi solusi yang lebih elegan :)

Shareef Hadid
sumber
0 
<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>
Ps Naidu
sumber