bootstrap中的div

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~

首先给出一个例子：

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）”所在的元素将被作为一个整体另起一行排列。

更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~