bootstrap中d-grid合并
例子Bootstrap的网格系统使用一系列、行和列来布局和对齐内容。它采用弹性盒子设计，反应灵敏。下面是一个示例，深入解释了网格系统是如何组合在一起的。
One of three columns One of three columns One of three columnsCopy< div class = container > < div class = row > < div class = col- > One of three columns </ div > < div class = col- > One of three columns </ div > < div class = col- > One of three columns </ div > </ div > </ div >上面的示例使用预定义的网格类在所有设备和窗口中创建三个等宽列。这些列在带有 .container 的页面中居中。
工作原理将其分解，以下是网格系统是如何组合在一起的：我们的网格支持六个响应断点。 断点基于最小宽度媒体查询，这意味着它们会影响该断点及其上的所有断点（例如，col--4适用于、md、lg、xl和xxl）。这意味着您可以通过每个断点控制和列的大小以及行为。
居中并水平放置内容。 使用 .container 表示响应像素宽度， .container-fluid 表示宽度：10
0%覆盖所有视口和设备，或使用响应（例如. .container-md )）表示流体和像素宽度的组合。
行是列的包装器。 每列都有水平填充（称为间隙），用于控制它们之间的间距。然后在具有负边距的行上抵消此填充，以确保列中的内容在视觉上与左侧对齐。行还支持修改器类来统一应用列大小调整，并支持边距类来更改内容的间距。
列非常灵活。 每行有12个模板列可用，允许您创建跨任意列数的不同元素组合。列类表示要跨越的模板列的数量（例如， col-4 跨越四个列）。宽度是按百分比设置的，因此相对大小总是相同的。
间隙也响应和定制。 所有断点上都可以使用Gutter类，其大小与边距和填充间距相同。将水平间隙更改为.gx-*类，将垂直间隙更改为.gy-*类，或将所有间隙更改为.g-*类。g-0也可用于移除间隙。
Sass variables, maps, and mixins power the grid. If you don’t want to use the predefined grid classes in Bootstrap, you can use our grid’s source Sass to create your own with mor
e semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. Sass变量、地图和mixin为电网供电。如果您不想在Bootstrap中使用预定义的网格类，您可以使用我们的网格源Sass创建您自己的具有更多语义标记的网格类。我们还包括一些CSS自定义属性来使用这些Sass变量，为您提供更大的灵活性。
注意flexbox的局限性和缺陷，比如不能将一些HT元素用作flex。 inability to use some HT elements as flex containers.
网格选项Bootstrap的网格系统可以适应所有六个默认断点，以及您自定义的任何断点。六个默认网格层如下所示：超小型 (xs)
小型 ()
中等 (md)
大 (lg)
特大 (xl)
超特大 (xxl)
如上所述，每个断点都有自己的、唯一的类前缀和修饰符。以下是网格如何跨越这些断点进行更改：xs<576px ≥576px md≥76px lg≥992px xl≥1200px xxl≥1400px Container max-width None (auto) 540px 720px 960px 1140px 1320px Class prefix .col- .col-- .col-md- .col-lg- .col-xl- .col-xxl- # of columns 12 Gutter width
1.5rem (.75rem on left and right) Custom gutters Yes Nestable Yes Column ordering Yes自动布局列利用特定于断点的列类来轻松调整列大小，而不需要显式的编号类，如 .col--6 。
等宽例如，这里有两个网格布局，适用于从xs到xxl的每个设备和窗口。为每个断点添加任意数量的无单元类，每个列的宽度都相同。
1 of 2 2 of 2 1 of 3 2 of 3 3 of 3
Copy< div class = container > < div class = row > < div class = col > 1 of 2 </ div > < div class = col > 2 of 2 </ div > </ div > < div class = row > < div class = col > 1 of 3 </ div > <
div class = col > 2 of 3 </ div > < div class = col > 3 of 3 </ div > </ div > </ div >设置一个列宽弹性盒子网格列的自动布局还意味着您可以设置一列的宽度，并使其周围的同级列自动调整大小。您可以使用预定义的网格类（如下所示）、网格混合或内联宽度。请注意，无论中心列的宽度如何，其他列都将调整大小。
1 of 3 2 of 3 (wider) 3 of 3 1 of 3 2 of 3 (wider) 3 of 3
Copy< div class = container > < div class = row > < div class = col > 1 of 3 </ div > < div class = col-6 > 2 of 3 (wider) </ div > < div class = col > 3 of 3 </ div > </ div > < div class = row > < div class = col > 1 of 3 </ div > < div class = col-5 > 2 of 3 (wider) </ div > < div class = col > 3 of 3 </ div > </ div > </ div >可变宽度内容使用 col-{breakpoint}-auto 类根据列内容的自然宽度调整列的大小。
1 of 3 Variable width content 3 of 3 1 of 3 Variable width content 3 of 3
Copy< div class = container > < div class = row justify-content-md-center > < div class = col col-lg-2 > 1 of 3 </ div > < div class = col-md-auto > Variable width content </ div > < d
iv class = col col-lg-2 > 3 of 3 </ div > </ div > < div class = row > < div class = col > 1 of 3 </ div > < div class = col-md-auto > Variable width content </ div > < div class = col col-lg-2 > 3 of 3 </ div > </ div > </ div >响应类Bootstrap的网格包括六层预定义的类，用于构建复杂的响应性布局。在您认为合适的超小型、小型、中型、大型或超大型设备上自定义列的大小。
col col col col col- col-4
Copy< div class = container > < div class = row > < div class = col > col </ div > < div class = col > col </ div > < div class = col > col </ div > < div class = col > col </ div > </ div > < div class = row > < div class = col- > col- </ div > < div class = col-4 > col-4 </ div > </ div > </ div >水平堆放使用一组.col -*类，可以创建一个基本的网格系统，该系统从堆叠开始，在小断点（）处变为水平。
col-- col--4 col- col- col-Copy< div class = container > < div class = row > < div class = col-- > col-- </ div > < div class = col--4 > col--4 </ div > </ div > < div class = row > < div class = col- > col- </ div > < div class = col- > col- </ div > < div class = col- > col- </ div >
</ div > </ div >混合和匹配不希望列简单地堆叠在一些网格层中吗？根据需要为每一层使用不同类的组合。请参阅下面的示例，以更好地了解其工作原理.col-md- .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6
Copy< div class = container >  < div class = row > < div class = col-md- > .col-md- </ div > < div class = col-6 col-md-4 > .col-6 .col-md-4 </ div > </ div > <!-- Columns start at 50% wide on mobile and bump up to
33.3% wide on desktop --> < div class = row > < div class = col-6 col-md-4 > .col-6 .col-md-4 </ div > < div class = col-6 col-md-4 > .col-6 .col-md-4 </ div > < div class = col-6 col-md-4 > .col-6 .col-md-4 </ div > </ div >  < div class = row > < div class = col-6 > .col-6 </ div > < div class = col-6 > .col-6 </ div > </ div > </ div >行和列使用 .row-cols-* 类快速设置最能呈现内容和布局的列数。普通的 .col-* 类应用于各个列（例如.col-md-4），而 .row-cols-auto 类是作为快捷方式在父.row上设置的。使用 .row-cols-auto 可以为列指定其自然宽度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。