Bootstrap zum Kombinieren von Zeilen (Zeilenbereich)

Ich teste Twitter Bootstrap und habe mich mit Grundgerüsten mit Reihen festgefahren. Ich habe die Dokumentation mehrmals überprüft und sehe Verschachtelungsspalten, in denen Sie Spalten innerhalb einer Spalte grundsätzlich verschachteln können, aber ich kann die Möglichkeit, Zeilen zu einer zu kombinieren und sie an der Spalte neben den nicht kombinierten Zeilen auszurichten, nicht finden.

Das folgende Bild sollte veranschaulichen, was ich erreichen möchte.

Die einzige Problemumgehungslösung, auf die ich gestoßen bin, ist die Verwendung von Tabellen, aber diese Idee gefällt mir nicht, da ich der Ansicht bin, dass die Reaktionsfähigkeit bei der Verwendung von Tabellen nicht funktioniert.

Hat jemand eine elegante Lösung dafür? Das meiste Weblayout, das ich mache, erfordert ein hohes Maß an Flexibilität, daher wäre es großartig, wenn ich hier etwas Nützliches aufgreifen könnte.

Divs werden standardmäßig vertikal gestapelt, sodass keine spezielle Behandlung von "Zeilen" innerhalb einer Spalte erforderlich ist.

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>

Hier ist die Geige .

Sie sollten die Bootstrap-Spaltenverschachtelung verwenden.

Siehe Bootstrap 3 oder 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/

(Vergrößern Sie im Geigenbildschirm Ihren Testbildschirm, um das Ergebnis anzuzeigen, da ich Spalte - * verwende und dann Spalten mit reaktionsfähigen Stapeln verwende.)

Hinweis : Ich bin nicht sicher, ob BS2 das Verschachteln von Spalten zulässt , aber in der Antwort von Paul Keister wird das Verschachteln von Spalten nicht verwendet. Sie sollten es verwenden und vermeiden, CSS neu zu erfinden, während Bootstrap gut funktioniert.

Die Spaltenhöhe ist automatisch. Wenn Sie eine zweite Zeile hinzufügen (wie in meinem Beispiel), passt sich die Spaltenhöhe an.

Hinweis: Dies war für Bootstrap 2 (relevant, als die Frage gestellt wurde).

Sie können dies erreichen, indem Sie row-fluideine flüssigkeitsbasierte (prozentuale) Zeile in einer vorhandenen Zeile erstellen 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>

Hier ist ein JSFiddle-Beispiel .

Ich habe bemerkt, dass es einen merkwürdigen linken Rand gibt, der für die Bereiche innerhalb des row-fluidnach dem ersten erscheint (oder nicht erscheint) . Dies kann mit einer kleinen CSS-Optimierung behoben werden (es ist dasselbe CSS, das auf das erste Kind angewendet wird und auf diejenigen nach dem ersten Kind erweitert wird):

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

Überprüfen Sie dieses. hoffe es wird voll für dich helfen.

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

Pauls Antwort scheint den Zweck des Bootstraps zu vereiteln; das, auf das Ansichtsfenster / die Bildschirmgröße zu reagieren.

Durch das Verschachteln von Zeilen und Spalten können Sie das gleiche Ergebnis erzielen und gleichzeitig die Reaktionsfähigkeit beibehalten.

Hier finden Sie eine aktuelle Antwort auf dieses 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>

Sie können den Codepen hier anzeigen.