根据移动端和电脑端屏幕不同大小,针对不同屏幕下占不同比例
<div class="container"> <!-- <div class="row"> <div class="col-xs-3 bg-info">1</div> <div class="col-xs-3 bg-info">2</div> <div class="col-xs-3 bg-info">3</div> <div class="col-xs-3 bg-info">4</div> </div> --> <div class="row"> <div class="col-md-4 col-lg-2 bg-info">在lg屏幕下占2:2:8</div> <div class="col-md-4 col-lg-2 bg-info">在md屏幕下占4:4:4</div> <div class="col-md-4 col-lg-8 bg-info">在sx屏幕下占12:12:12</div> </div> <br> <div class="row"> <div class="col-xs-6 col-md-3 bg-info">在md及以上屏幕中占比3:4:5</div> <div class="col-xs-6 col-md-4 bg-info">在sx屏幕下占6:6:6</div> <div class="col-xs-6 col-md-5 bg-info">sx屏幕下共18份,多余被挤下来</div> </div> </div>