margin值为负数——bootstrap row container-fl

 

1、在使用bootstrap的过程中发现只要是使用row这个class，则div每次都是都是超过100%,出现滚动条

 

2、如果是在<div class="container-fluid">控件下面，则不会出现滚动条

 

查看了row 和 container-fluid的class样式说明

 

      //让div控件显示为100%，然后外边距左右各添加15px，实际上是给div增加30px
.row {
    margin-left: -15px;
    margin-right: -15px;
}

//container-fluid是让div水平居中，左右内边距为15px
.container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

因此在<div class="container-fluid">控件下面，则不会出现滚动条
<div class="container-fluid">
	<div>
		container-fluid class占一行，并且向内减小30px；并且左右各减小15px
	</div>

	<div class="row">
		row　class占一行，并且向外扩展30px；并且左右各扩展15px;
	</div>
</div>
    

 

自己写了一个demo

      <div style="position: absolute;top:50%;left: 50%;border: 1px solid red;height: 300px;width: 300px;">
    <div style="height: 200px;margin-left: -15px;margin-right:-15px;border: 1px solid blue">
    </div>
</div>