Bootstrap3 网格系统（二）

╰半橙微兮° 2023-10-18 15:11 114阅读 0赞

**网格系统 ： 通过一系列的行（row）与列（column）的组合来创建页面的布局，设置的内容就可以放在这些创建好的布局中**。

**实现原理**

1.  通过定义容器的大小
2.  平分为12份
3.  调整内外边距 结合媒体查询

**网格工作原理：一行数据（row）必须包含在 .container中，以便为其赋予合适的对齐方式和内边距。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

源代码：

备注：

.container   固定布局
    .container-fluid  流式布局
    
    代表是行
    .row  
    
    代表是列
    .col-xs-1  ~12   (如果是3，那么就是合并3列)
    .col-sm-1  ~12
    .col-md-1  ~12
    .col-lg-1  ~12
     注意：（ xs:微型  sm:小型，   md: 中型  , lg:大型）
    
    偏移几列
    .col-xs-offset-3  
    .col-sm-offset-3  
    .col-md-offset-3  
    .col-lg-offset-3

**列组合**

效果:![20190305170707273.png][]

**列偏移**

**效果：**

**![20190305170812715.png][]**

**列嵌套:**

<div class="container">
    			<div class="row">
    				<div class="col-md-8">
    					<p>one列宽8.。。。。。</p>  
    					<div class="row">
    						<div class="col-md-6">two列宽4</div>
    						<div class="col-md-6">two列宽4</div>
    					</div>
    					
    					<div class="row">
    						<div class="col-md-6">two列宽4</div>
    						<div class="col-md-6">two列宽4</div>
    					</div>
    				</div>
    				<div class="col-md-4">one列宽4</div>
    			</div>
    		</div>

**效果：**

**![20190305172235631.png][]**

**列排序:**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

列顺序  
col-md-push-3 向左浮动3列 (推) -->right  
col-md-pull-3 向右浮动3列 (拉) -->left

<h3>列顺序-用于图片与文字交互</h3>
    		<div class="container">
    			<div class="row" id="pic">
    				<div class="col-md-2"><img src="img/one (1).jpg" /></div>
    				<div class="col-md-2">
    					<p>【猫咪绝育后变成“肥宅”，谁都拿它没办法】韩国一只叫Mango的猫咪， 自从绝育后体重就开始猛增。正常猫咪都是8斤多， 它却已经胖到14斤。关键是还天天在家里各种瘫，怎么逼它都不动，最
    					</p>
    				</div>
    			</div>
    
    			<div class="row" id="pic">
    				<div class="col-md-2 col-md-push-2"><img src="img/one (2).jpg" /></div>
    				<div class="col-md-2 col-md-pull-2">
    					<p>【猫咪绝育后变成“肥宅”，谁都拿它没办法】韩国一只叫Mango的猫咪， 自从绝育后体重就开始猛增。正常猫咪都是8斤多， 它却已经胖到14斤。关键是还天天在家里各种瘫，怎么逼它都不动，最
    					</p>
    				</div>
    			</div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190305170225745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20190305170707273.png]: https://img-blog.csdnimg.cn/20190305170707273.png
[20190305170812715.png]: https://img-blog.csdnimg.cn/20190305170812715.png
[20190305172235631.png]: https://img-blog.csdnimg.cn/20190305172235631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190313171708519.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190313171842330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70