Twitter的引導3 - 佈局

Question

我要定義這樣的佈局：

--------------------------------------------------------- 
    |    |          | 
    |    |          | 
    |    |    content <div>   | 
    |    |          | 
    |    |          | 
    | sidebar |          | 
    |  <div> |          | 
    |    | ---------------------------------------| 
    |    |          | 
    |    |   input box <input>   | 
    |    |          | 
    --------------------------------------------------------- 

我不是一個前端的人所有，因此請幫我用引導3.這個佈局我一直在拉我的頭髮浮動，定位等

HTML

<div class="container-fluid"> 
    <div class="col-md-3"></div> 
    <div class="col-md-9"> 
     <div class="content"></div> 
     <div class="input-box"> 
      <input type="text"/> 
     </div> 
    </div> 
</div> 

CSS

.col-md-9 { 
    background-color: green; 
    height: 600px; 
} 

.content { 
    height: 550px; 
    background-color: blue; 
} 

.input-box { 
    margin-top: 20px; 
    height: 30px; 
    background-color: red; 
} 

.input-box input { 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
} 

正如你所看到的，我對高度進行了硬編碼，我想將它擴展到全高度。

謝謝！

Answer 1

下面是一個使用工具條（帶切換）佈局引導3.

http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle

如果你喜歡側邊欄沒有撥動，只是忽略＃菜單切換JS。