Bootstrap中的.d-grid类是什么

Question

我正在使用引导程序v5.1的块按钮，我使用d-grid使我的按钮响应。

<div class="d-grid ">
<button class="btn btn-primary" type="button">Button</button>
</div>

我想知道d-grid在这里做什么，因为我找不到任何关于这方面的文档。

Answer 1

"D-"；是Bootstrap的一种实用程序，它直接影响Display并帮助您进行网格布局。在Css中，我们称之为"；显示"；。

工作原理：

.d-{value}

示例：

CSS: display: inline-flex;
Bootstrap: d-inline-flex

所有值

*无

内联

内联块

块

表

表格单元格

表行

柔性

内联flex*

关于网格：

CSS网格布局擅长将页面划分为主要区域，或者根据大小、位置和层来定义由HTML基元构建的控件各部分之间的关系。

与表一样，网格布局使作者能够将元素对齐到列和行中。然而，与使用表相比，使用CSS网格可以实现或更容易实现更多布局。例如，网格容器的子元素可以将它们自己定位，以便它们实际上重叠和分层，类似于CSS定位的元素。更多信息来源：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://getbootstrap.com/docs/4.0/utilities/display/

https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_display_grid

Answer 2

类的d部分是显示实用程序类的一部分。这通常会更改CSS显示属性的值：https://getbootstrap.com/docs/4.0/utilities/display/

在您的示例中，d-grid类使div元素成为一个网格容器，它是CSS网格布局的一部分。请参见此处：https://www.w3schools.com/css/css_grid.asp

它看起来像"；网格"；Bootstrap 5不支持值，它是CSS的旧遗留值。应该将其更改为以下值之一：

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex