Bootstrap menggabungkan baris (rowpan)

Saya menguji Twitter Bootstrap dan terjebak dengan perancah dasar dengan baris. Saya mengunjungi kembali dokumentasi mereka beberapa kali dan saya dapat melihat kolom bersarang di mana Anda pada dasarnya dapat menyarangkan kolom dalam kolom tetapi saya tidak dapat menemukan kemampuan menggabungkan baris menjadi satu dan membuatnya sejajar dengan kolom di sebelah baris yang tidak digabungkan.

Gambar di bawah ini harus menggambarkan apa yang ingin saya capai.

Satu-satunya solusi yang saya temukan adalah menggunakan tabel tetapi saya tidak menyukai gagasan ini karena pandangan saya adalah bahwa daya tanggap tidak akan berfungsi dengan penggunaan tabel.

Apakah ada yang punya solusi elegan untuk ini? Sebagian besar tata letak web yang saya lakukan memerlukan tingkat fleksibilitas yang baik sehingga akan sangat bagus jika saya dapat mengambil sesuatu yang berguna di sini.

Div menumpuk secara vertikal secara default, jadi tidak perlu penanganan khusus "baris" dalam kolom.

div {
  height:50px;
}
.short-div {
  height:25px;
}

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

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Ini biolanya .

Anda harus menggunakan penyarangan kolom bootstrap.

Lihat Bootstrap 3 atau Bootstrap 4 :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(Layar Dalam Fiddle, memperbesar layar tes untuk melihat hasilnya, karena saya menggunakan kumpulkan md - *, maka tumpukan responsif kolom)

Catatan : Saya tidak yakin bahwa BS2 memungkinkan penyarangan kolom , tetapi dalam jawaban Paul Keister, penyarangan kolom tidak digunakan. Anda harus menggunakannya dan menghindari untuk menemukan kembali css sementara bootstrap bekerja dengan baik.

Tinggi kolom otomatis, jika Anda menambahkan baris kedua (seperti yang saya lakukan dalam contoh saya), tinggi kolom menyesuaikan dengan sendirinya.

Catatan: Ini untuk Bootstrap 2 (relevan saat pertanyaan diajukan).

Anda dapat melakukannya dengan menggunakan row-fluid untuk membuat baris berbasis fluida (persentase) di dalam yang sudah ada block.

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

Berikut adalah contoh JSFiddle .

Saya perhatikan bahwa ada margin kiri ganjil yang muncul (atau tidak muncul) untuk bentang di dalam row-fluidsetelah yang pertama. Ini dapat diperbaiki dengan sedikit perubahan CSS (ini adalah CSS yang sama yang diterapkan ke anak pertama, diperluas ke yang melewati anak pertama):

.row-fluid [class*="span"] {
    margin-left: 0;
}

Periksa ini. berharap ini akan membantu penuh untuk Anda.

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

Jawaban Paul tampaknya mengalahkan tujuan bootstrap; yang responsif terhadap viewport / ukuran layar.

Dengan menyarangkan baris dan kolom, Anda dapat memperoleh hasil yang sama, sekaligus mempertahankan daya tanggap.

Berikut ini adalah tanggapan terkini untuk masalah ini;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

Anda dapat melihat codepen di sini.