bootstrap中的div

首先给出一个例子：

eg：

<div class = "row-fluid"><div class = "col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12" style = "background-color:white"><div class = "col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-8 col-sm-offset-1 col-xs-12" style = "padding:0px"><h3 style = "margin:20px 0px 5px; padding:0px"><i class = "fa fa-arrow-circle-right"></i>请输入您要找回密码的账号</h3></div><div class = "col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1" style = "padding:0px"><hr style = "border:1px dotted; padding:0px; margin:5px 0px 20px"></div><div class = "col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-lg-offset-1"><form action="" class = "form-horizontal" role = "form" method = "POST" style = "" id = "forgetPasswordForm"><div class = "form-group"><div class = "col-md-8 col-md-offset-3 col-lg-8 col-lg-offset-3 col-sm-8 col-sm-offset-3 col-xs-10 col-xs-offset-2"><div class = "input-group margin-bottom-sm"><span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span><input class="form-control" type="text" placeholder="请输入账号"></div></div></div></form></div><div><label>A</label></div></div></div>

然后看一下界面效果：

从界面可以看到，本来A所在的div是在form所在的div的下面的，按照div的前后顺序，A应该出现在form表的右侧或者下侧才是正常的，而这里A却出现在了form表的上侧，这是为什么呢？

我们先来看一下A所在div的位置：

<div class = "col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-lg-offset-1"><form action="" class = "form-horizontal" role = "form" method = "POST" style = "" id = "forgetPasswordForm"><span style="white-space:pre"></span><div class = "form-group"><span style="white-space:pre"></span><div class = "col-md-8 col-md-offset-3 col-lg-8 col-lg-offset-3 col-sm-8 col-sm-offset-3 col-xs-10 col-xs-offset-2"><span style="white-space:pre"></span><div class = "input-group margin-bottom-sm"><span style="white-space:pre"></span><span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span><span style="white-space:pre"></span><input class="form-control" type="text" placeholder="请输入账号"><span style="white-space:pre"></span></div><span style="white-space:pre"></span></div><span style="white-space:pre"></span></div></form></div><div><span style="white-space:pre"></span><label>A</label></div>

但是A所在的div是没有任何class属性的，而界面显示的是A的div出现在了form所在div的前面，不知道这是不是bootstrap3.0中的一个特征，即没有任何class的div是有限参与排版的，当前得到的结论就是这样。

还有一个要说明的是bootstrap中的栅格问题。

1、container和row要保持一致，要么

<div class = "container-fluid"><div class = "row-fluid">……</div></div>

要么：

<div class = "container"><div class = "row">……</div></div>

两种书写形式，都可以，唯一不同的是，第一种写法是流布局，如果一行row后面还有空余的栅格，且下一个div设定的栅格数小于或者等于空余的栅格数，那么该div就会排在后面，否则，就从新另起一行，不包括这空余的栅格。

同时，在列中设置padding，可改变列和列之间的gutter，行与行之间的margin，可抵消掉行所包含的列之间的padding。超一行bootstrap3.0文档中的一句话，可以更直观一些：

• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。