用bootstrap来放置天气和图标的位置 自适应

今天写了个关于天气的页面，他的摆放位置有点难，花了一两个小时用bootstrap来摆放，但是感觉bug很多

所以今天写下自己的心得，放上代码，以后这种就知道怎么写了

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="row">
                        <!--<div class="col-md-1 col-lg-1"></div>-->
                        <div class="col-xs-5 col-sm-5 col-md-5 col-lg-3" id="zonghe_tianqi">
                            <div class="media">
                                <div class="media-left" id="zonghe_left">
                                    <a href="#">
                                        <i class="iconfont icon-qing"></i>
                                    </a>
                                </div>
                                <div class="media-body" id="zonghe_body">
                                    <h5 class="media-heading">晴</h5>
                                    <span>38℃</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-3" id="zonghe_ledong">
                            <span>乐东</span>
                        </div>
                    </div>
                </div>

其次就是三横三竖的排版，也搞懂了，就是用三个排版布局就可以了

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
					<div>
						<img src="img/zonghe_1.png" class="img-responsive"/>
					</div>
					<div id="zonghe_dedtail">
						<p>水厂名称：一水厂</p>
						<p>能耗：xxxx</p>
						<p>药耗：xxxx</p>
						<p>取水量：xxxx</p>
						<p>制水量：xxxx</p>
					</div>
					<div>
						<img src="img/zonghe_2.png" class="img-responsive"/>
					</div>
					<div>
						<p>设备名称：电磁水表</p>
						<p>瞬时流量</p>
						<p>压力：xxxx</p>
						<p>水质：xxxx</p>
						<p>安装日期：xxxx</p>
					</div>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
					<div id="allmap"></div>
					<div id="allmap_p">
						<p>2019年1月1日 1时1分 东口路水表电量低报警</p>
						<p>2019年1月1日 1时1分 东口路水表瞬时流量超高限报警</p>
						<p>2019年1月1日 1时1分 东口路水表压力超低限报警</p>
						<p>2019年1月1日 1时1分 东口路水表水质超标报警</p>
						<p>......</p>
					</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2" id="zonghe_right">
					<div>
						<p>大客户用水排名对比</p>
					</div>
					<div>
						<img src="img/zonghe_3.png" class="img-responsive"/>
					</div>
					<div>
						<p>分区漏损统计图</p>
					</div>
					<div>
						<img src="img/zonghe_4.png" class="img-responsive"/>
					</div>
					<div>
						<p>压力排名统计图</p>
					</div>
					<div>
						<img src="img/zonghe_5.png" class="img-responsive"/>
					</div>
				</div>