| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | --- | 
					
						
							|  |  |  |  | id: bad87fee1348bd9aec908847 | 
					
						
							| 
									
										
										
										
											2021-03-04 19:55:32 -07:00
										 |  |  |  | title: 分割 Bootstrap Row | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | challengeType: 0 | 
					
						
							| 
									
										
										
										
											2020-09-07 16:17:39 +08:00
										 |  |  |  | forumTopicId: 18306 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  |  | dashedName: split-your-bootstrap-row | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | --- | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --description--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-04 19:55:32 -07:00
										 |  |  |  | 现在已经有了一个 Bootstrap Row,把它分成两列。 | 
					
						
							| 
									
										
										
										
											2020-09-07 16:17:39 +08:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-04 19:55:32 -07:00
										 |  |  |  | 在行内创建两个 class 属性为 `col-xs-6` 的 `div` 元素。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --hints--
 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-04 19:55:32 -07:00
										 |  |  |  | 两个 `div class="col-xs-6"` 元素应该内嵌入 `div class="row"` 元素中。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | ```js | 
					
						
							|  |  |  |  | assert($('div.row > div.col-xs-6').length > 1); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-03-04 19:55:32 -07:00
										 |  |  |  | 确保所有的 `div` 元素都有闭合标签。 | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | ```js | 
					
						
							|  |  |  |  | assert( | 
					
						
							|  |  |  |  |   code.match(/<\/div>/g) && | 
					
						
							|  |  |  |  |     code.match(/<div/g) && | 
					
						
							|  |  |  |  |     code.match(/<\/div>/g).length === code.match(/<div/g).length | 
					
						
							|  |  |  |  | ); | 
					
						
							| 
									
										
										
										
											2018-10-10 18:03:03 -04:00
										 |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  |  | # --seed--
 | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | ## --seed-contents--
 | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | ```html | 
					
						
							|  |  |  |  | <div class="container-fluid"> | 
					
						
							|  |  |  |  |   <h3 class="text-primary text-center">jQuery Playground</h3> | 
					
						
							|  |  |  |  |   <div class="row"> | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  |   </div> | 
					
						
							|  |  |  |  | </div> | 
					
						
							|  |  |  |  | ``` | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-12-16 00:37:30 -07:00
										 |  |  |  | # --solutions--
 | 
					
						
							| 
									
										
										
										
											2020-08-13 17:24:35 +02:00
										 |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-01-13 03:31:00 +01:00
										 |  |  |  | ```html | 
					
						
							|  |  |  |  | <div class="container-fluid"> | 
					
						
							|  |  |  |  |   <h3 class="text-primary text-center">jQuery Playground</h3> | 
					
						
							|  |  |  |  |   <div class="row"> | 
					
						
							|  |  |  |  |     <div class="col-xs-6"></div> | 
					
						
							|  |  |  |  |     <div class="col-xs-6"></div> | 
					
						
							|  |  |  |  |   </div> | 
					
						
							|  |  |  |  | </div> | 
					
						
							|  |  |  |  | ``` |