在这两天重新写一个关于响应式部分的前端页面，有了一些新的总结，希望可以帮到那些被bootstrap玩死的你。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<style>
body{
font-family: "微软雅黑";
}
/*调整圆圈链接ol位置*/
.carousel-indicators {
bottom: -5px;
}
.container{
width:100%;
padding:0;
}
.title_text{
color:#ff0101;
font-size:48px;
font-weight: 600;
font-family: Arial;
}
.subtitle_text{
color:#ff0101;
font-size:26px;
}
.border_bottom{
border-bottom: 2px solid #dadada;
}
</style>
<body>
<!--党建工作 title-->
<div class="container">
<div class="row text-center">
<div class="col-md-2"></div>
<div class="col-md-8 text-center border_bottom">
<span class="title_text">Classic cases</span>
<span class="subtitle_text">党建工作</span>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-1">
全部类型
</div>
<div class="col-md-1">合同纠纷</div>
<div class="col-md-1">刑事犯罪</div>
<div class="col-md-1">离婚诉讼</div>
<div class="col-md-1">交通事故</div>
<div class="col-md-1">房产纠纷</div>
<div class="col-md-1"> 损害赔偿</div>
<div class="col-md-1">财产纠纷</div>
<div class="col-md-2"></div>
</div>
</div>
《你想要的样式 --start》
<!--党建工作 context-->
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<img src="../images/unionLaywer/union_02.png" alt="" class="img-responsive">
</div>
<div class="col-md-3">
<img src="../images/unionLaywer/union_07.png" alt="" class="img-responsive">
</div>
<div class="col-md-3">
<img src="../images/unionLaywer/union_08.png" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="../images/unionLaywer/union_05.png" alt="" class="img-responsive">
<img src="../images/unionLaywer/union_01.png" alt="" class="img-responsive">
</div>
<div class="col-md-6">
<img src="../images/unionLaywer/union_03.png" alt="" class="img-responsive">
<img src="../images/unionLaywer/union_09.png" alt="" class="img-responsive">
</div>
<div class="col-md-3">
<img src="../images/unionLaywer/union_06.png" alt="" class="img-responsive">
<img src="../images/unionLaywer/union_04.png" alt="" class="img-responsive">
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
《你想要的样式 --end》
<!--西安秦岳律师事务所-->
<div class="container">
<div class="row text-center">
<div class="col-md-2"></div>
<div class="col-md-8 text-center">
<p>西安秦岳律师事务所</p>
<div>
陕西秦岳律师事务所成立于2010年，是陕西省较早一批经司法部核准、由西安市司法局批准设立的一家以处理综合类法律服务执业机构。<br>
秦岳扎根于西安，辐射西北和着眼于全国，在北京、上海、天津、郑州、南京、杭州、重庆、成都、济南、苏州、武汉等多地均设有关联机构，可实现全国范围内实时跨区域协同办案，致力于在全国范围内为客户提供最为高效有力的法律支持。<br>
我们秉承“专业、专心、专注”的服务理念，致力于以最专业的法律知识、最专心的工作态度专注于每个案件，为客户提供最好的法律服务。<br>
</div>
<div>
地址：西安市未央区凤城二路 海洋大厦703<br>
邮编：150000<br>
电话：029-55666998<br>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div></div>
</div>
<!--相关案例-->
<div class="container">
<div class="row text-center">
<div class="col-md-2"></div>
<div class="col-md-8 text-center border_bottom">
<span class="title_text">Related cases</span>
<span class="subtitle_text">相关案例</span>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="row" style="padding-top:2%">
<div class="col-md-6">
<img src="../images/classicCase/classic-02.png" alt="" class="img-responsive">
</div>
<div class="col-md-6">
<img src="../images/classicCase/classic-02.png" alt="" class="img-responsive">
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<script>
$('.carousel').carousel()
$(window).scroll(function () {
if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav");
}else {$(".navbar-fixed-top").removeClass("top-nav");}
})
</script>
</body>
</html>
最终样式
