Bootstrap4 网格系统

Bootstrap4网格系统Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。我们也可以根据自己的需要，定义列数：table.grid{width:100%;border:none;background-color:#F6F4F0;padding:0px;}table.gridtr{text-align:center;}table.gridtd{border:4pxsolidwhite;padding:6px;}111111111111444486612Bootstrap4的网格系统是响应式的，列会根据屏幕大小自动重新排列。网格类Bootstrap4网格系统有以下5个类:.col-针对所有设备.col-sm-平板-屏幕宽度等于或大于576px.col-md-桌面显示器-屏幕宽度等于或大于768px).col-lg-大桌面显示器-屏幕宽度等于或大于992px).col-xl-超大桌面显示器-屏幕宽度等于或大于1200px)网格系统规则Bootstrap4网格系统规则:网格每一行需要放在设置了.container(固定宽度)或.container-fluid(全屏宽度)类的容器中，这样就可以自动设置一些外边距与内边距。使用行来创建水平的列组。内容需要放置在列中，并且只有列可以是行的直接子节点。预定义的类如.row和.col-sm-4可用于快速制作网格布局。列通过填充创建列内容之间的间隙。这个间隙是通过.rows类上的负边距设置第一行和最后一列的偏移。网格列是通过跨越指定的12个列来创建。例如，设置三个相等的列，需要使用用三个.col-sm-4来设置。Bootstrap3和Bootstrap4最大的区别在于Bootstrap4现在使用flexbox（弹性盒子）而不是浮动。Flexbox的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。如果您想了解有关Flexbox的更多信息，可以阅读我们的CSSFlexbox教程。下表总结了Bootstrap网格系统如何在不同设备上工作的：超小设备<576px平板≥576px桌面显示器≥768px大桌面显示器≥992px超大桌面显示器≥1200px容器最大宽度None(auto)540px720px960px1140px类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-列数量和12间隙宽度30px（一个列的每边分别15px）可嵌套Yes列排序Yes以下各个类可以一起使用，从而创建更灵活的页面布局。Bootstrap4网格的基本结构以下代码为Bootstrap4网格的基本结构:Bootstrap4网格基本结构<!--第一个例子：控制列的宽度及在不同的设备上如何显示--><divclass="row"><divclass="col-*-*"></div></div><divclass="row"><divclass="col-*-*"></div><divclass="col-*-*"></div><divclass="col-*-*"></div></div><!--第二个例子：或让Bootstrap者自动处理布局--><divclass="row"><divclass="col"></div><divclass="col"></div><divclass="col"></div></div>第一个例子：创建一行(<divclass="row">)。然后，添加是需要的列(.col-*-*类中设置)。第一个星号(*)表示响应的设备:sm,md,lg或xl,第二个星号(*)表示一个数字,同一行的数字相加为12。第二个例子:不在每个col上添加数字，让bootstrap自动处理布局，同一行的每个列宽度相等：两个"col"，每个就为50%的宽度。三个"col"每个就为33.33%的宽度，四个"col"每个就为25%的宽度，以此类推。同样，你可以使用.col-sm|md|lg|xl来设置列的响应规则。接下来我们可以看看实例。创建相等宽度的列，Bootstrap自动布局实例<divclass="row"><divclass="col">.col</div><divclass="col">.col</div><divclass="col">.col</div></div>尝试一下等宽响应式列以下实例演示了如何在平板及更大屏幕上创建等宽度的响应式列。在移动设备上，即屏幕宽度小于576px时，四个列将会上下堆叠排版:实例<divclass="col-sm-3">.col-sm-3</div><divclass="col-sm-3">.col-sm-3</div><divclass="col-sm-3">.col-sm-3</div><divclass="col-sm-3">.col-sm-3</div>尝试一下不等宽响应式列以下实例演示了在平板及更大屏幕上创建不等宽度的响应式列。在移动设备上，即屏幕宽度小于576px时，两个列将会上下堆叠排版:实例<divclass="row"><divclass="col-sm-4">.col-sm-4</div><divclass="col-sm-8">.col-sm-8</div></div>尝试一下平板和桌面端以下实例演示了在桌面设备的显示器上两个列的宽度各占50%，如果在平板端则左边的宽度为25%，右边的宽度为75%,在移动手机等小型设备上会堆叠显示。实例<divclass="container-fluid"><divclass="row"><divclass="col-sm-3col-md-6"><p>RUNOOB</p></div><divclass="col-sm-9col-md-6"><p>k88.net</p></div></div></div>尝试一下平板、桌面、大桌面显示器、超大桌面显示器以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%,在移动手机等小型设备上会堆叠显示。实例<divclass="container-fluid"><divclass="row"><divclass="col-sm-3col-md-6col-lg-4col-xl-2"><p>RUNOOB</p></div><divclass="col-sm-9col-md-6col-lg-8col-xl-10"><p>k88.net</p></div></div></div>尝试一下偏移列偏移列通过offset-*-*类来设置。第一个星号(*)可以是sm、md、lg、xl，表示屏幕设备类型，第二个星号(*)可以是1到11的数字。为了在大屏幕显示器上使用偏移，请使用.offset-md-*类。这些类会把一个列的左外边距（margin）增加*列，其中*范围是从1到11。例如：.offset-md-4是把.col-md-4往右移了四列格。实例<divclass="row"><divclass="col-md-4">.col-md-4</div><divclass="col-md-4offset-md-4">.col-md-4.offset-md-4</div></div><divclass="row"><divclass="col-md-3offset-md-3">.col-md-3.offset-md-3</div><divclass="col-md-3offset-md-3">.col-md-3.offset-md-3</div></div><divclass="row"><divclass="col-md-6offset-md-3">.col-md-6.offset-md-3</div></div>尝试一下