網柵格布局
阿新 • • 發佈:2017-12-03
寬度 class 柵格 order color 功能 clear med row
其中最主要運用到了 calc 這個 css3 功能
width: calc(50% - 20px);
// 在寬度50%的情況下,減去20px的值
html 代碼
<!-- col-md-4 --> <!-- 適用於應屏幕寬度大於 768px 的場景 --> <div class="row"> <div class="col-md-4 col col-sm-6"></div> <div class="col-md-4 col col-sm-6"></div> <div class="col-md-4 col col-sm-12"></div> </div> <div class="row"> <div class="col-md-3 col col-sm-3"></div> <div class="col-md-6 col col-sm-6"></div> <div class="col-md-3 col col-sm-3"></div> </div> <div class="row"> <div class="col-md-1 col-sm-2 col "></div> <div class="col-md-1 col-sm-2 col"></div> <div class="col-md-2 col-sm-8 col"></div> <div class="col-md-2 col-sm-3 col"></div> <div class="col-md-6 col-sm-3 col"></div> </div>
css 代碼
body { margin: 0; padding: 0; height: 100%; } .row { clear: both; height: auto; } .row .col { box-sizing: border-box; border: 1px solid #999999; background-color: #EEEEEE; height: 50px; float: left; margin: 10px 10px 10px 10px; } /* 最小寬度769px */ @media only screen and (min-width: 769px){ .row .col-md-6 { width: calc(50% - 20px); } .row .col-md-4 { width: calc( 33.3% - 20px) } .row .col-md-3 { width: calc(25% - 20px) } .row .col-md-2 { width: calc(16.7% - 20px) } .row .col-md-1 { width: calc(8.3% - 20px) } } /* 最大寬度 768px */ @media only screen and (max-width: 768px){ .row .col-sm-6 { width: calc(50% - 20px); } .row .col-sm-12 { width: calc( 100% - 20px) } .row .col-sm-8 { width: calc( 66.6% - 20px) } .row .col-sm-3 { width: calc(25% - 20px) } .row .col-sm-2 { width: calc(16.7% - 20px) } .row .col-sm-1 { width: calc(8.3% - 20px) } }
網柵格布局