Bootstrap łączący wiersze (rozpiętość wierszy)

I 'm testowania Twitter Bootstrap i utknęła z podstawowym rusztowaniem z wierszy. Wielokrotnie wracałem do ich dokumentacji i widzę zagnieżdżone kolumny, w których można w zasadzie zagnieżdżać kolumny w kolumnie, ale nie mogę znaleźć możliwości łączenia wierszy w jeden i wyrównania go z kolumną obok niepołączonych wierszy.

Poniższe zdjęcie powinno ilustrować to, co chcę osiągnąć.

Jedynym rozwiązaniem obejścia problemu, z jakim się spotkałem, jest użycie tabel, ale nie podoba mi się ten pomysł, ponieważ moim zdaniem responsywność nie działałaby przy użyciu tabel.

Czy ktoś ma na to jakieś eleganckie rozwiązanie? Większość układu strony internetowej, którą wykonuję, będzie wymagała wysokiego poziomu elastyczności, więc byłoby wspaniale, gdybym mógł wybrać tutaj coś przydatnego.

Elementy DIV są domyślnie ułożone pionowo, więc nie ma potrzeby specjalnej obsługi „wierszy” w kolumnie.

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>

Oto skrzypce .

Powinieneś użyć zagnieżdżania kolumn bootstrap.

Zobacz Bootstrap 3 lub 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/

(Na ekranie Fiddle powiększ ekran testu, aby zobaczyć wynik, ponieważ używam col- md - *, a następnie responsywne kolumny stosów)

Uwaga : Nie jestem pewien, czy BS2 zezwala na zagnieżdżanie kolumn , ale w odpowiedzi Paula Keistera zagnieżdżanie kolumn nie jest używane. Powinieneś go używać i unikać ponownego projektowania css, podczas gdy bootstrap działa dobrze.

Wysokość kolumn jest automatyczna, jeśli dodasz drugą linię (tak jak w moim przykładzie), wysokość kolumny dostosuje się.

Uwaga: dotyczyło Bootstrap 2 (istotne, gdy zadano pytanie).

Możesz to osiągnąć, używając row-fluiddo utworzenia wiersza opartego na płynie (procentach) wewnątrz istniejącego 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>

Oto przykład JSFiddle .

Zauważyłem, że wystąpił dziwny lewy margines, który pojawia się (lub nie pojawia się) dla przęseł wewnątrz row-fluidpierwszego. Można to naprawić za pomocą niewielkiej poprawki CSS (jest to ten sam CSS, który jest stosowany do pierwszego dziecka, rozszerzony na te za pierwszym dzieckiem):

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

Sprawdź ten. mam nadzieję, że to pomoże ci w pełni.

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

Wydaje się, że odpowiedź Paula podważa cel bootstrapu; to reagowanie na rozmiar obszaru roboczego / ekranu.

Zagnieżdżając wiersze i kolumny, możesz osiągnąć ten sam wynik, zachowując jednocześnie responsywność.

Oto aktualna odpowiedź na ten problem;

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

Możesz wyświetlić kodepen tutaj.