網頁開發 網頁設計

Bootstrap教學《Boostrap自訂欄位》固定col欄位width寬度

2015/03/17

梅問題-Bootstrap教學《Boorstrap自訂欄位》固定col欄位寬度

  Bootstrap現在已被廣為的使用,最主要的原因很簡單,一來是簡單易上手,二來是效果齊全,該有的都有,就連之前二姐委託的宏碁雲端、Papago、華碩活動頁面….都採用了Bootrap,由此可見它的便利性,且透過Bootstrap可縮短開發自適應網頁的時間,而這麼好用的元件,也不是完全都沒缺點,還是有不足的地方,像之前梅干也曾強化了它的廣告輪播,以及自訂欄位分割的數量,接著梅干要再來分享個,也是大家常會遇到的問題,就是側邊欄固定欄位寬度的部分,由於側邊欄大部分會用來放banner或廣告,因此這時若用百分比縮放區塊時,很容易造成跑版的問題,其實作法很簡單,只要自訂一組類別名稱,立即就可實現固定欄位寬度的夢想啦!至於怎麼做現在就一塊來看看吧!


放在<head>….</head>之間:
<style type=“text/css”>
    .col-fixed, .row {
      float: left;
      margin-left: 0;
      margin-right: 0;
    }
    /固定欄位寬度300像素/
    .col-fixed {
      background: #CCC;
      width: 300px;
    }

.row {
  background: #EEE;
  width:calc(100% - 300px);
}

</style>


放在<body>….</body>之間:
當要固定欄位時,只要加入col-fixed,但要獨立出來,不可包在row裡。
<div class=“container”>
    <div class=“row”>
        <div class=“col-md-6”>
         .col-md-6
        </div>
        <div class=“col-md-6”>
        .col-md-6
        </div>
    </div>
    <!– 固定欄位寬度為300px –>
    <div class=“col-fixed”>
        固定寬度300px
    </div>
    <!– 固定欄位寬度為300px end–>
</div>

結果預覽:
這時候無論怎麼改變預覽尺寸,側邊欄的寬度就會固定成300像素,不會跟著一起縮放,這時就不會再跑版啦!
梅問題-Bootstrap教學《Boorstrap自訂欄位》固定col欄位寬度