Sidebar hat eine undefinierte Höhe und ein falsches Bild

Question

Ich bin mir sicher, dass ich das in meinem Kopf überkompliziere, aber ist das folgende Layout mit dem Standard Bootstrap 3 Grid System möglich?

Header und Sub-Header können 12 Spalten füllen. Dann überspannt Image, wahrscheinlich feste Höhe, 8-col dann eine Seitenleiste, die 4-col überspannt. Das Problem ist, die Seitenleiste hat eine undefinierte Höhe und die Unterseite des Bildes ist Inhalt.

bekam Bis jetzt so etwas wie:

<div class="col-xs-12"> 
    <h1>Header</h1> 
</div> 
<div class="row"> 
<div class="col-md-8"> 
    image 
</div> 
<div class="col-md-4"> 
    Navigation down right 
</div> 
<div class="col-sm-8"> 
    Content 
</div> 
</div> 

Layout

Answer 1

Nach Ihrem Bild

Sie sollen das folgende Layout verwenden (Klicken Sie auf die "Full-Seite" Taste, um es in Aktion zu sehen. Ignorieren Sie auch das CSS. Es ist nur für Testzwecke):

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css); 
 

 
[class*='col-'] > div:not(.row) { 
 
    background: #DDD; 
 
    margin: 0.25em 0; 
 
    padding: 0.5em; 
 
    text-align: center; 
 
    height: 5em; 
 
} 
 
.red [class*='col-'] > div:not(.row) { 
 
    background: #C55; 
 
    color: #FFF; 
 
    height: auto; 
 
} 
 

 
[class*='col-sm-4'] > div:not(.row) { 
 
    height: 9em; 
 
}

<div class="container"> 
 
    <div class="red row"> 
 
    <div class="col-sm-12"> 
 
     <div>HEADER</div> 
 
    </div> 
 
    <div class="col-sm-8"> 
 
     <div>SUB HEADER</div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-8"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      <div>IMAGE</div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-6"> 
 
      <div>LEFT COL</div> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
      <div>RIGHT COL</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div>SIDEBAR</div> 
 
    </div> 
 
    </div> 
 
</div>

Im Wesentlichen Sie eine verschachtelte Reihe mit 6 breiten Spalten für ein 12-Säule Raster-Layout mögen.

Answer 2

Bootstrap Reihe hat nur zwölf Spannweiten. Ich sehe, dass 8 + 4 + 8 = 20> 12, so dass der "Inhalt" div in einer neuen Zeile wird ...

Und Sie können nicht col-sm-x mit col-md-x in der gleichen Zeile setzen ...

Mein Vorschlag: in zwei Reihen

<div class="col-xs-12"> 
    <h1>Header</h1> 
    </div> 
    <div class="row"> 
     <div class="col-md-8"> 
      image 
     </div> 
     <div class="col-md-4"> 
      Navigation down right 
     </div> 
    </div> 
    <div> 
     <div class="col-sm-8"> 
      Content 
     </div> 
    </div> 

Aber wenn Sie alles in der gleichen Zeile wollen:

<div class="col-xs-12"> 
    <h1>Header</h1> 
    </div> 
    <div class="row"> 
     <div class="col-md-5"> 
      image 
     </div> 
     <div class="col-md-2"> 
      Navigation down right 
     </div> 
     <div class="col-md-5"> 
      Content 
     </div> 
    </div> 

Und wenn Sie einen Seitenteil möchten, können Sie Reihen Kaskade:

<div class="col-xs-12"> 
     <h1>Header</h1> 
    </div> 
    <div class="row"> 
     <div class="col-md-8"> 
      <div class="row"> 
       <div class="col-md-12"> 
        Image 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
        Content 
       </div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      Navigation down right 
     </div> 
    </div>