放在<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像素，不會跟著一起縮放，這時就不會再跑版啦!
