ID:30774350
大小:153.55 KB
页数:8页
时间:2019-01-03
4、umn)可以作为数据行.row容器的直接子元素。预定义的网格类,比如.row和.col-xs-4,可用于快速创建网格布局。栅格系统中的列是通过指定1到12的值來表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4來创建。注意事项:正如上面在注释部分所展现的一样的.container(固定宽度)是固定宽度的布局方式。通过查看源码,在查看.container类的时候我们会发现,它的宽度是响应式的:(如下).container{padding-right:15px;padding-left:15px;margin-right:auto;marginTeft:auto;}©medi
5、a(min-width:768px){・container{width:750px;}}©media(min-width:992px){・container{width:970px;}}/**/从上面的css代码可以看到,该类默认为整个父元素的宽度(最小屏幕),但是在大屏幕下有着不同的宽度,并且在不同宽度下左右margin会同时增加或减少(水平居中)。.container-fluid类就和.container的默认情况一样,为100%宽度。(CSS代码一样)从源码中我们还可以发现,除了有左右margin外,还可以看到该类是有着左右填充(padding)存在的。如果我们继续查看源码,可以发
6、现数据行.row'I1的每一个列也有着左右填充(padding)的存在,如下:.col-md-1,.col-lg-12/**/{position:relative;min-height:lpx;padding-right:15px;padding~lcft:15px;}看到这里,大家应该都能想到会有什么样的情况出现!我们在第一个和最后一个列因为双填充的存在,实际上对丁内容的隔离已经到了30px。我们需要怎么消除影响呢?Bootstrap是通过・rows上的外边距(margin)取负margin-left:-15px;margin-right:-15px;,表示第一列和最后一列的行偏移,用
7、来抵消第一个列的左内距和最后一列的右内距。基本用法bootstrap3.x使用了四种栅格选项來形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项Z间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs、col-sm>col-md、col-lg,我们懂英文的就知道,lg是large的缩写,md是mid的缩写,sm
此文档下载收益归作者所有