2015-04-02 6 views
-1

我要定義這樣的佈局:Twitter的引導3 - 佈局

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

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

謝謝!

+1

請添加您到目前爲止創建的HTML和CSS,否則此問題可能會被關閉。 – TylerH 2015-04-02 22:48:21

+0

對不起大家,只是發佈我的HTML和CSS。 – Michael 2015-04-03 01:10:07

+0

http://jasny.github.io/bootstrap/getting-started/#examples – Christina 2015-04-03 01:20:42

回答