Bootstrap是目前最常被使用到的自適應框架，除了是由Twiter所研發的外，再來就是相當的簡單好用，且該有的應有盡有，特別是它的網格，設計相當簡易，完全不用寫任何的CSS碼，只需透過HTML的標示，就能快速的將版面，分割成3欄、4欄、6欄….等，有效的縮短網頁開發時間，這也是梅干用過這麼多套的框架中，設計的最為理想與好上手的，但那天正好有位同學問到，怎麼分割成5欄，讓梅干當場楞了一下，預設似乎是沒辦法的，因為總共才12欄，所以這時就只能自行客制化，這也是Bootstrap最好用的地方，不足時都可自行再客制，至於要怎麼將版面分割成5欄呢?有需要的朋友，現在也一塊來看看吧!
放在<head>…..</head>之間：
/* define bootstrap 5 columns */
.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-1-5 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-1-5 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-1-5 {
width: 20%;
float: left;
}
}
放在<body>…..</body>之間：
當要使用時，只要加入col-lg-1-5、col-md-1-5、col-sm-1-5，畫面就會分割成5等分了。
<div class=“row”>
<div class=“col-md-1-5”>1</div>
<div class=“col-md-1-5”>2</div>
<div class=“col-md-1-5”>3</div>
<div class=“col-md-1-5”>4</div>
<div class=“col-md-1-5”>5</div>
</div>
[範例預覽] [範例下載]