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

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

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    henry 說道:

    有一個bootstrap打錯囉

    回應:
    感謝已修正