Bootstrap教學《Boorstrap自訂欄位》固定col欄位width寬度:Realtime－【韓劇推薦】2016年8，韓劇看什麼呢？2016韓劇推薦好看的 , 2016韓劇推薦必看 , 2016韓劇 , 2016韓劇排行榜前十名 , 韓劇推薦 , 2016韓劇介紹 , 2016韓劇排行榜 , 2016韓劇列表 ,

Blogtrottr

梅問題‧教學網【Minwt】

最豐富的3C|攝影設計|旅遊資訊網

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

Mar 17th 2015, 22:00, by admin

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

放在<head>....</head>之間：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<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裡。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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欄位寬度

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions