邊欄有未定義的高度和錯位的圖像

Question

我敢肯定，我在腦海中過度複雜化，但是使用標準bootstrap 3網格系統可以實現以下佈局嗎？

標題和子標題可以填充12列。然後，圖像，可能是固定的高度，跨越8欄，然後是橫跨4欄的側欄。問題是側欄有一個未定義的高度，圖像的下面是內容。

迄今爲止得到的東西，如：

<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

根據你的形象

應使用如下的佈局（單擊「全頁面」按鈕，看到它在行動。另外，忽略CSS。這只是用於測試）：

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

基本上你想要一個嵌套行6個12列網格佈局寬列。

Answer 2

引導行有只有十二跨越。我看到，8 + 4 + 8 = 20> 12，因此，「內容」分區將在一個新的行...

而且你不能在同一行中把col-sm-x與col-md-x ...

我的建議：分成兩排

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

但如果你想在同一行中所有的那樣：

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

如果你想有一個側面部分，可以級聯行：

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