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。