Bootstrap menggabungkan baris (rowpan)


128

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.

contoh tata letak baris

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.

Jawaban:


99

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 .


2
Terima kasih banyak. Itulah yang saya cari! Saya berharap dokumentasi Bootstrap menyebutkan ini sebagai tambahan di bawah kolom bersarang karena pendekatannya pada dasarnya sama.
Seong Lee

1
dalam contoh Anda 1row=25px, Anda mendefinisikan 2row=50px,. dapatkah Anda membuat div span menjadi setinggi seluruh baris? mencoba menambahkan .row{height:100%;}tetapi tidak berhasil.
Tomer W

Ya, @carter, contoh asli tidak sesuai dengan bootstrap 3; Saya sudah memperbaikinya.
Paul Keister

1
Contoh memiliki talang pada baris kedua yang terlihat ganjil.
Connie DeCinko

84

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.


10
Ini harus menjadi jawaban yang diterima karena berfungsi dengan Bootstrap di luar kotak dan tidak memerlukan penyesuaian CSS apa pun
cheenbabes

Jawaban yang diterima lebih mudah dibaca; ini berisi potongan kode dan tautan ke JSfiddle dan IMHO Paul Keister Contoh lebih jelas daripada contoh Alcalyn. Itu sebabnya saya pikir jawaban Paul Keister harus disimpan sebagai jawaban yang diterima, setidaknya sampai jawaban Alcalyn diperbaiki.
naXa

1
@Alcalyn di browser saya (Chrome) biola yang ditautkan dari jawaban Anda tidak memberikan hasil yang diharapkan (lihat gambar di pertanyaan). Hasil sebenarnya adalah semua div sejajar dalam sebuah kolom.
naXa

1
Jika Anda melihat satu kolom dengan semua bentang rata, ini karena -md-aturan responsif. Anda harus memperbesar layar Anda untuk melihat hasil yang diharapkan. Jika Anda ingin span Anda ditampilkan sebagai kolom pada layar yang lebih kecil, ganti -md-dengan -sm-atau -xs-. Ini adalah pertanyaan breakpoint (Lihat bootstrapdocs.com/v3.0.3/docs/css/#grid ).
Alcalyn

12

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

Terima kasih atas usaha Anda tetapi sepertinya baris tidak harus menggunakan cairan baris untuk mencapai ini seperti yang disarankan oleh jawaban yang saya pilih. Saya sangat menghargainya!
Seong Lee

1
Benar sekali, tetapi jangan lupa row-fluidketika tiba saatnya untuk mulai membagi baris dalam.
pickypg

7

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

1

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.


0

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 tidak berfungsi untuk saya dengan <div class = "col-sm-2"> <div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4" style = "background- warna: kuning; "> <input type =" file "id =" imgInp "name =" img "accept =". png, .jpg, .jpeg "> <! - <input type =" text "src =" "class =" form-control "id =" imgName "size =" 40 "> </input> -> <img id =" img-upload "src =" "alt =" Transporter "width =" 300% " height = "50%" class = "rounded-circle" /> </div> </div> </div>
SUDIP SINGH

2
Harap tambahkan penjelasan seputar kode Anda. Sehingga OP dan calon pembaca dapat dengan mudah memahami jawaban Anda.
Sangam Belose
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.