적응 배치 및 날씨 아이콘을 사용하는 부트 스트랩

오늘,이 자리에 부트 스트랩을 사용하는 십이시간했다, 자신의 위치가 조금 어려운, 날씨에 대한 페이지를 쓸 수 있지만 그것은 버그를 많이 느낀다

그래서 오늘은 자신의 경험을 적어 미래에 코드를 넣어이 작성하는 방법을 알 수

< DIV 클래스 = "COL-XS는 -3- COL-SM-3 COL-MD-3 COL-LG-3" > 
                    < DIV 클래스 = "로우" > 
                        <! - <div 클래스 = "COL-MD-1 COL -LG-1 "> </ div> -> 
                        < DIV 클래스 ="COL-XS-5 COL-SM-5 COL-MD-5 COL-LG-3 " ID ="zonghe_tianqi " > 
                            < DIV 클래스 =" 미디어 " > 
                                < DIV 클래스 ="미디어 왼쪽 " ID ="zonghe_left " > 
                                    < HREF ="# " > <전 클래스 = "iconfont 아이콘 - 청나라" > </ I >
                                        
                                    </ > </ DIV > < DIV 클래스 = "미디어 바디" ID = "zonghe_body" > < H5 클래스 = "미디어 제목" >晴</ H5 > < 스팬 > 38 ℃ </ 스팬 > </ DIV > </ DIV > </ DIV > < DIV 클래스 = "COL-MD-3 COL-LG-3" ID = "zonghe_ledong" > < 스팬 >Ledong </ 스팬 >
                                
                                
                                    
                                    
                                
                            
                        
                        
                            
                        </ DIV > 
                    </ DIV > 
                </ DIV >

둘째는 수평 및 3 개의 수직 레이아웃이지만, 또한 알게, 그것은 세 조판 레이아웃을 사용하는 것입니다

<DIV 클래스 = "COL. 3-XS-SM-COL. 3-COL-MD-2. 3-COL-LG"> 
					<DIV> 
						<IMG SRC에 = "IMG / zonghe_1.png"클래스 = "IMG 응답"/> 
					</ 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"클래스 = "IMG 응답"/> 
					</ DIV > 
					<div> 
						<P> 장치 : 전자 m </ P> 
						<P> 순시 유량 </ P> 
						<P> 압력 : XXXX </ p>
						<P> 물 : XXXX </ P> 
						<P> 설치 날짜 : XXXX </ P> 
					</ DIV> 
				</ DIV> 
				... <div 클래스 = "COL-XS- 6 COL-SM-6 COL-MD-6 COL -LG-6 "> 
					<DIV ID = "allmap"> </ DIV> 
					<DIV 위에서 언급 한 id = "allmap_p"> 
						<ρ-> 2019 1월 왕위 1 동 하우 도로 미터 저 배터리 경보에서 리 1시 1 </ ρ-> 
						<ρ-> 2019 1월 월 1 회 이스트 사이드로드 순간 유량계 초 상한 경보에 1시 1분 </ ρ->에서 
						1 동쪽 도로 미터 초 저압 알람 한계에 1시 1분에서 <ρ-> 2019 니안 1개월 </ ρ-> 
						<ρ-> 년 1 월 1 일에 1시 1분에서 2019 동쪽 도로 미터 수질 알람 </ ρ-> 초과 
						<ρ-> ... </ ρ-> 
					</ DIV> 
				</ DIV> 
				<DIV 클래스 = "COL-XS를 . COL 3 SM -. 3-MD-COL COL-LG-2 3 "ID ="zonghe_right "> 
					<div> 
						<P> 비교 순위 물 계정 </ P> 
					</ div> 
					<div> 
						<IMG SRC에 = "IMG / zonghe_3.png"클래스 = "IMG 응답"/> 
					</ DIV> 
					<DIV> 
						<P> 차트 파티션 누설 </ P> 
					</ DIV> 
					<DIV> 
						<IMG SRC에 = "IMG / zonghe_4.png"클래스 = "IMG 응답"/>
					</ DIV> 
					<DIV>  
						<P- 형> 압력 순위 차트 </ ρ-> 
					</ div>
					<DIV> 
						<IMG SRC = "IMG / zonghe_5.png"클래스 = "IMG 응답"/> 
					</ DIV> 
				</ DIV>