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 的一种实用程序，可直接影响显示并帮助您进行网格布局。在 CSS 中我们称之为“显示”。

怎么运行的：

.d-{value}

例子 ：

CSS: display: inline-flex;
Bootstrap: d-inline-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 似乎不支持“grid”值，它是 CSS 的旧值。应将其更改为以下值之一：

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