在网页开发中合理的布局是非常重要的，及根据网页的需求来进行布局，对于一个前端来说是必须掌握的内容
一、下面我来给大家介绍下Bootstrap的布局容器：container 和 container-fluid
1、.container 固定宽度，页面内容与窗体两边有一个较大的空白
2、.container-fluid宽度是100%，可用于扁平化设计
——大家可以通过调试工具查看里面的样式
二、网格系统（又可叫栅格系统）在Bootstrap中是非常重要的一个布局容器：
1、栅格系统是bootstrap最大的亮点，先后其它的框架都有效仿这个思想（我们需要学习他的思想）。
2、类似于表格，由行和列组成。.row 表示行，.col表示列，一行最多12列（超出12列，多余的列另起一行显示）
3、行的宽度以container或container-fluid作为基点，所以他们的结构 container --> .row-->col-xx-xx。所以“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
基本的结构如下：
<div class="container-fluid">
<div class="row">
<div class="col-md-4">第1列</div>
<div class="col-md-4">第2列</div>
<div class="col-md-4">第3列</div>
</div>
</div>
我们可根据自己的需求来调节布局:（ xs/ sm / md / lg ）
xs 超小屏幕手机 (<768px)
sm 小屏幕平板 (≥768px)
md 中等屏幕桌面显示器 (≥992px)
lg 大屏幕大桌面显示器 (≥1200px)
三、手机、平板、桌面响应式应用
<div class="container">
<h1>手机、平板、桌面响应式应用</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-8">平板：3 PC：6 超屏：8 </div>
<div class="col-sm-9 col-md-6 col-lg-4">平板：9 PC：6 超屏：4</div>
</div>
</div>
四、由于栅格系统把宽度col进行自定义分配，但是一行最多12列，超出部分就会另起一行，如下：
<div class="container">
<h1>手机、平板、桌面响应式应用</h1>
<div class="row">
<div class="col-xs-9">占9成</div>
<div class="col-xs-4">占4成，9+4=13，超过了12 ，那么我就另起一行</div>
<div class="col-xs-6">占6成，6+4=10 ， 没有超过12，就在同一行显示</div>
</div>
</div>
五、响应式列重置(强制清楚浮动，解决元素塌陷)
如下：在不清楚浮动的情况下
<div class="row">
<div class="col-xs-6">我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。</div>
<div class="col-xs-6">我占用6成</div>
<div class="col-xs-6">我的显示可能不正常了。</div>
<div class="col-xs-6">我占用6成</div>
</div>
通过（clearfix类名）清楚浮动的情况下：
<div class="row">
<div class="col-xs-6">我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。</div>
<div class="col-xs-6">我占用6成</div>
<div class="clearfix"></div>
<div class="col-xs-6">我的显示可能不正常了。</div>
<div class="col-xs-6">我占用6成</div>
</div>
栅格系统应用的小场景：
<div class="row">
<div class="col-xs-6">姓名</div>
<div class="col-xs-6"><input/></div>
</div>
<div class="row">
<div class="col-xs-offset-6 col-xs-6"><input type="button" value="提交"/></div>
</div>
大家可以根据上面的代码练习下，并且通过删除类名的方式查看发生了什么变化，是自己理解更加通透,通过分享知识使大家受益，自己也在此获益，