bootstrap栅格系统

最新推荐文章于 2025-04-01 01:50:29 发布

原创最新推荐文章于 2025-04-01 01:50:29 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

小课堂专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Flexbox布局的基本概念，包括其工作原理、容器与项目的定义，以及如何通过使用特定的属性来实现更灵活的布局。文章还深入探讨了栅格布局中容器、行和列的间距设置，并给出了一段示例代码。

阅读数：7 编辑

一、背景介绍

Flexbox 布局(FLexible Box)意在提供一个更为有效的方式来进行布局、对齐和分配一个容器内元素之间的空间，即使他们的大小是未知的或者动态的。

flex布局的主要思想是，让容器能够改变它的子元素的宽度/高度（甚至顺序），从而更好地填充可用的空间（主要是为了适应所有种类的设备和屏幕大小）。

最重要的，flexbox 布局是可以改变方向的。与之相对的是传统布局（block是垂直方向的从上到下，inline是水平方向的从左到右）。虽然他们在页面上表现良好，但是他们缺乏弹性（字面意义上的缺乏弹性）来适应大型的或者复杂的应用（尤其是遇到方向的改变、调整大小、伸展、收缩等等这些情况时）。

二、知识剖析

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross
start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、常见问题

栅格布局的用法相信大家都很熟悉了，今天我们主要来探讨容器的padding 15px,行的margin -15px，列的padding 15px为什么要这么来回的使用15px

四、解决方案

<h3>容器container</h3>
<p>Container是一个容器，使用它的主要是有两个目的</p>
<p>1,在响应式宽度上提供宽度约束。响应式尺寸的改变其实改变的是 container ，行 (rows) 和列 (columns) 都是基于百分比的所以它们不需要做任何改变</p>
<p>2,提供 padding 以至于不内容不直为紧贴于浏览器边缘，两边都是 15px ，下图中粉色的就是了，稍后解释更多；</p>
<img src="../img/css-10-GridSystemInBootstrap/two.png">
</section>
<section>
<h3>行row</h3>
<p>row 为col提供了空间，理想上一行上分了12个col ，当所有col都向左浮时row 也就扮演了容器角色，另外当浮动有问题时row也不会重叠。</p>
<p>row的两侧都拥有独特的负15px的margin 值,如下图中蓝色部分.被当作为row的div被约束在 container内边界与粉色区域重叠，但没超过。这负的15px margin值把row推出了 container的15pxpadding，并与之重叠，本质上讲就是负出去。为什么这么做呢？原因得看列 (col) 的工作原理，下面我们会看到</p>
<img style="margin-top: -10px;" src="../img/css-10-GridSystemInBootstrap/three.png">
</section>
<section>
<h3>列col</h3>
<P>列(col)也有15px的padding，如下图中黄颜色部分。上文中提到row的负margin抵消了container的padding，所以为每个column设置padding就是为了防止内容直接触碰边界，使内容不会紧贴在浏览器边界上，而列与列之间有了padding才不会互相紧贴在一起。</P>

五、编码实战

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="1.css">
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
<div class=" col-xs-12 col-sm-6 col-md-3 ">1</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

六、拓展思考

1.栅格系统是按照12等分来设计的，如果想要5等分怎么做？

七、参考文献

参考一：
http://www.cnblogs.com/dojo-lzz/p/4621627.html

参考二:
http://v3.bootcss.com/css/#grid

八、更多讨论

提问1：栅格五等分该怎么办

回答：将每个元素的宽度设置为百分之20.

提问2：栅格有什么缺点

回答：浮动会影响内容的展示

提问3：若超出12个栅格会怎么显示？

回答：会在另起一行显示

感谢大家观看！