怎么让这段代码实现响应式
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container"">
<div class="navbar-header">
<a href="#" class="navbar-brand logo"><img src="img/fluid/green.jpg" alt="logo"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<form class="navbar-form navbar-left hidden-sm hidde-xs hidden-md">
<div class="form-group">
<input type="text" class="form-control"/>
</div>
<button class="btn btn-primary" type="submit">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="hobby.html"><span class="glyphicon glyphicon-home"></span>首页</a></li>
<li><a href="reading2.html"><span class="glyphicon glyphicon-list"></span>阅读</a></li>
<li class="active"><a href="sports.html"><span class="glyphicon glyphicon-fire"></span>网球</a></li>
<li><a href="videos.html"><span class="glyphicon glyphicon-question-sign"></span>影视</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<hgroup>
<h1>网球</h1>
<h4>网坛的最新动态，资源等...</h4>
</hgroup>
</div>
</div>
<div id="sports">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/wrok/federer.jpg" alt="" />
<div class="caption">
<h4>费德勒</h4>
<p>瑞士男子职业网球运动员,五个澳网冠军、18个大满贯冠军</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/wrok/xiaode.jpg" alt="" />
<div class="caption">
<h4>德约科维奇</h4>
<p>塞尔维亚职业网球运动员。赢得12个大满贯、30个大师系列赛</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/wrok/nad.jpg" alt="" />
<div class="caption">
<h4>纳达尔</h4>
<p>西班牙职业网球运动员。28座大师赛冠军（历史第二） 14座大满贯</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/wrok/lina.jpg" alt="" />
<div class="caption">
<h4>李娜</h4>
<p>中国网球运动员。21次入WTA女单决赛，9个WTA和19个ITF单打冠军</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/wrok/wawrinka2.jpg" alt="" />
<div class="caption">
<h4>瓦林卡</h4>
<p>瑞士男子网球运动员。14年澳网男单冠军, 15法网男单冠军</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/wrok/xiaowei2.jpg" alt="" />
<div class="caption">
<h4>小威廉姆斯</h4>
<p>美国女子职业网球运动员。23次女单大满贯冠军, 14次女双大满贯冠军</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/wrok/Ala.jpg" alt="" />
<div class="caption">
<h4>A·拉德万斯卡</h4>
<p>波兰网球职业运动员,最高排名：2012年 世界排名第2,WTA单打冠军</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="img/wrok/Murray2.jpg" alt="" />
<div class="caption">
<h4>安迪·穆雷</h4>
<p>英国职业网球运动员,12年美网男单冠军, 12年伦敦奥运会男单冠军</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="about">
<div class="container">
<div class="col-md-3 hidden-sm hidden-xs">
<div class="list-group">
<a class="list-group-item" href="#1">温网</a>
<a class="list-group-item" href="#2">澳网</a>
<a class="list-group-item" href="#3">法网</a>
</div>
</div>
<div class="col-md-9 about">
<a name="1"></a>
<h3>温网简介</h3>
<p>温布尔登网球锦标赛（Wimbledon Championships，或简称“温网”）是网球运动中最古老和最具声望的赛事，是网球四大满贯之一。温网举办地在英国伦敦郊区的温布尔登，通常举办于6月或7月，是每年度网球大满贯的第3项赛事，排在澳大利亚网球公开赛和法国网球公开赛之后，美国网球公开赛之前，也是四大满贯中唯一的草地比赛。整个赛事通常历时两周，但会因雨延时。男子单打、女子单打、男子双打、女子双打和男女混合双打比赛在不同场地同时进行。温布尔登还举办有男子单打、女子单打、男子双打、女子双打的青年比赛。此外，温布尔登还为退役球员举办特别邀请赛。</p>
<a name="2"></a>
<h3>澳网简介</h3>
<p>澳大利亚网球公开赛（英语：Australian Open，简称：澳网）是网球四大满贯赛事之一。比赛通常于每年一月的最后两周在澳大利亚维多利亚州的墨尔本体育公园举行，是每年四大满贯中最先举行的一个赛事，也是最年轻的大满贯。澳大利亚网球公开赛创办于1905年，已经有100多年的历史。比赛创立之初比赛被命名为“澳大拉西亚锦标赛”（Australasian Championships）；1969年，比赛进入“公开赛时代”。自1988年起，比赛一直在墨尔本公园的室外硬地球场上进行。比赛设有男子单双打、女子单双打以及混合双打等项目。男子单打冠军奖杯是诺曼·布鲁克斯挑战杯（Norman Brookes Challenge Cup），女子单打冠军奖杯是达芙妮·阿克赫斯特纪念杯（Daphne Akhurst Memorial Cup）。</p>
<a name="3"></a>
<h3>法网简介</h3>
<p>法国网球公开赛（French Open），简称“法网”，是一项在法国巴黎罗兰·加洛斯球场举办的网球大满贯赛事。通常在每年的5月至6月进行，是每年第二个进行的大满贯赛事。该赛事创办于1891年，是网球比赛唯一一个在红土球场上进行的大满贯比赛，标志着红土赛事中的最高荣誉，同时也标志着每年红土赛季的结束。由于红土场地球速较慢，且男子单打比赛采用五盘三胜制，因此参加比赛的选手需要有着超群的技术和惊人的毅力。</p>
</div>
</div>
</div>
<ul class="nav nav-pills" id="headd">
<li class="active"><a href="#">网球拍</a></li>
<li><a href="#">网球鞋</a></li>
<li><a href="#">球线</a></li>
<li><a href="#">球包</a></li>
</ul>
<div class="container">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/wrok/pai1.jpg" />
<div class="caption">
<h3>PS95</h3>
<p>原价1667</p>
<p><a href="#" class="btn btn-default">抢购</a></p>
<h2>限时抢购<span class="label label-danger">1358</span></h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/wrok/pai2.jpg" />
<div class="caption">
<h3>PS97</h3>
<p>原价1357</p>
<p><a href="#" class="btn btn-default">抢购</a></p>
<h2>限时抢购<span class="label label-danger">1148</span></h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/wrok/pai3.jpg" />
<div class="caption">
<h3>Blade</h3>
<p>原价1247</p>
<p><a href="#" class="btn btn-default">抢购</a></p>
<h2>限时抢购<span class="label label-danger">1038</span></h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/wrok/pai9.jpg" />
<div class="caption">
<h3>HEAD新手拍</h3>
<p>原价537</p>
<p><a href="#" class="btn btn-default">抢购</a></p>
<h2>限时抢购<span class="label label-danger">428</span></h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/wrok/pai10.jpg" />
<div class="caption">
<h3>顶配清洁球</h3>
<p>原价67</p>
<p><a href="#" class="btn btn-default">抢购</a></p>
<h2>限时抢购<span class="label label-danger">58</span></h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/wrok/pai6.jpeg" />
<div class="caption">
<h3>RF97</h3>
<p>原价1557</p>
<p><a href="#" class="btn btn-default">抢购</a></p>
<h2>限时抢购<span class="label label-danger">1348</span></h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/wrok/pai7.jpg" />
<div class="caption">
<h3>blade温网版</h3>
<p>原价1247</p>
<p><a href="#" class="btn btn-default">抢购</a></p>
<h2>限时抢购<span class="label label-danger">938</span></h2>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail">
<img src="img/wrok/pai8.jpg" />
<div class="caption">
<h3>HEAD I5</h3>
<p>原价1337</p>
<p><a href="#" class="btn btn-default">抢购</a></p>
<h2>限时抢购<span class="label label-danger">1128</span></h2>
</div>
</div>
</div>
别看代码很长，我问的只是那两片图片的区域，一是不对齐，二是在页面缩小后不响应式，希望有大佬能来帮帮我。。。
慕工程60056481回答
-
清枫_
使用media query
随时随地看视频慕课网APP
相关分类
Html5