使用引導容器佈局

-3

我想創建一個佈局，將適當調整，無論窗口的大小，分辨率等這裏就是我想要做：使用引導容器佈局

html, body { 
     border: 0px; 
     margin: 0px; 
     padding: 0px; 
     height:100%; 
    } 
    .container{ 
     height:100%; 
     display:table; 
     width: 80%; 
    } 
    .row{  
     display: table-row; 
    } 
    @media (min-width: 992px) { 
     .row .no-float { 
     display: table-cell; 
     float: none; 
     } 
    } 
    .col-md-9 { 
     background: #A28DFF; 
     height:100%;  
    } 
    .navbar { 
     margin-bottom: 0; 
    } 

    </style> 

<div class="container"> 
    <div class ="row " style="border:0px solid red;"> 
     <div class=" no-float" style="border:0px solid green; height:1px;"> 
      <!-- code for my nav bar --> 
     </div>   
    </div> 
    <div class="row">   
     <div class="col-md-9 no-float" style="padding-top:50px"> 
      <!-- code for my content --> 
     </div> 
    </div> 
</div>

問題但是，它不能正確調整大小。如果頁面變得太小，則工具欄行和內容行將分開，不會彼此調整大小，也不會保持在一起。任何人都可以幫助提示如何使這個佈局響應調整大小？

這裏是一個的jsfiddle：https://jsfiddle.net/4qj7a3bh/13/

來源

2017-11-25 jason

你能使codepen，jsbin或別的東西，所以我們可以看到在行動代碼？ – Zvezdas1989

我已添加jsFiddle。如果你看看它，並調整輸出窗口的大小，你會發現div不會保持對齊。謝謝 – jason

如果你投降或投票結束這篇文章，你能解釋爲什麼嗎？這樣做沒有評論不會幫助任何人。謝謝 – jason

因此，我們的結論是，你是不是很有經驗的引導，所以我爲你做這個代碼。這裏是如何使用bootstrap的例子，你也應該探索他們的網格系統，這樣你可以更好地理解代碼。你也應該避免直接定位引導類，除非它是絕對必要的。

<div class="container mainC"> 
    <div id="toolbar" class="row text-center col-md-10 col-md-offset-1"> 
    <h2>Toolbar section</h2> 
    </div> 
    <div id="content" class="row text-center col-md-10 col-md-offset-1"> 
    <h2>Content section</h2> 
    </div> 
</div> 

#toolbar { 
    background: cyan; 
} 

#content { 
    background: yellow; 
}

下面是codepen所以你可以看到在行動代碼： https://codepen.io/anon/pen/vWaKxZ

來源

2017-11-25 20:05:10 Zvezdas1989

謝謝。是的，我是Bootstrap的新手。這看起來不錯，但唯一不同的是我試圖讓第二個div延伸到頁面的底部。有沒有辦法做到這一點，而不直接更改Bootstrap類？再次感謝！ – jason

是的，還有更多的方法來實現這種效果，但是當你添加內容時，如果你想要使用視圖高度CSS屬性來實現這一點，它將自行擴展，視圖高度將總是基於你窗口的高度來擴展想象它就像是類似的東西百分比。例如：https://codepen.io/anon/pen/eejzeY – Zvezdas1989

謝謝。這就是我一直在尋找的！ – jason

使用引導容器佈局

回答

相關問題