在做網頁時,框架超出去最外圍,排版可能就會跑掉,
因此,當框架跑出去最外圍時,
我們可以使用Bootstrap的「container-fluid」來限制住,使內容不超過。
〈使用Bootstrap時,需要先安裝套件:http://getbootstrap.com/〉
〈圖一〉左邊超過框架,未使用container-fluid包住。
程式碼為:
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="bg-green">
123
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="bg-green">
35546
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="bg-green">
88653
</div>
</div>
</div>
〈圖二〉使用了container-fluid,外圍沒有超過。
程式碼為:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="bg-green">
123
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="bg-green">
35546
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="bg-green">
88653
</div>
</div>
</div>
</div>
全站熱搜