Satırları birleştiren önyükleme (satır aralığı)

Twitter Bootstrap'ı test ediyorum ve satırlarla temel yapı iskelesine takılı kaldım . Dokümantasyon sayısını defalarca gözden geçirdim ve temelde sütunları bir sütun içine yerleştirebileceğiniz iç içe geçmiş sütunları görebiliyorum, ancak satırları bir araya getirme ve birleştirilmemiş satırların yanındaki sütunla hizalandırma yeteneğini bulamıyorum.

Aşağıdaki resim, neyi başarmak istediğimi göstermelidir.

Karşılaştığım tek geçici çözüm tabloları kullanmak, ancak bu fikirden hoşlanmıyorum çünkü benim görüşüm, yanıt verebilirliğin tabloların kullanımıyla çalışmayacağıdır.

Buna zarif bir çözümü olan var mı? Yaptığım web düzeninin çoğu iyi düzeyde esnekliğe ihtiyaç duyacak, bu yüzden burada yararlı bir şey bulabilirsem harika olacak.

Div'ler varsayılan olarak dikey olarak yığınlanır, bu nedenle bir sütun içindeki "satırların" özel olarak işlenmesine gerek yoktur.

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>

İşte keman .

Önyükleme sütun iç içe geçirmeyi kullanmalısınız.

Bkz Bootstrap 3 veya 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/

(Fiddle ekranında, sonucu görmek için test ekranınızı büyütün çünkü colmd - * kullanıyorum, ardından duyarlı yığın sütunları)

Not : Ben emin BS2 izin verdiğini duyuyorum kolonlar iç içe , ama Paul Keister ait yanıtında, iç içe sütunlar kullanılmaz. Onu kullanmalı ve bootstrap iyi işlerken css'yi yeniden icat etmekten kaçınmalısınız.

Sütun yüksekliği otomatiktir, ikinci bir satır eklerseniz (benim örneğimde yaptığım gibi), sütun yüksekliği kendini uyarlar.

Not: Bu Bootstrap 2 içindi (soru sorulduğunda geçerlidir).

Bunu, row-fluidmevcut bir satırın içinde değişken (yüzde) tabanlı bir satır oluşturmak için kullanarak gerçekleştirebilirsiniz 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>

İşte bir JSFiddle örneği .

İlkinden row-fluidsonraki aralıkların içinde görünen (veya görünmeyen) garip bir sol kenar boşluğu olduğunu fark ettim . Bu, küçük bir CSS ayarlamasıyla düzeltilebilir (ilk alt öğeye uygulanan CSS'nin aynısı, ilk alt öğeden geçenlere genişletilir):

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

Bunu kontrol et. umarım tam size yardımcı olur.

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

Paul'ün cevabı, önyükleme amacını bozuyor gibi görünüyor; görüntü alanına / ekran boyutuna duyarlı olma.

Satırları ve sütunları iç içe yerleştirerek aynı sonucu elde edebilir ve yanıt verebilirliği koruyabilirsiniz.

İşte bu soruna güncel bir yanıt;

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

Şunları yapabilirsiniz buraya codepen görüntüleyin.