我正在使用带有引导程序的块按钮,v5.1
并且我曾经 d-grid
使我的按钮具有回应性。
<div class="d-grid ">
<button class="btn btn-primary" type="button">Button</button>
</div>
我想知道d-grid
这里有什么作用,因为我找不到任何有关此的档案。
uj5u.com热心网友回复:
类的 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 的旧旧值。应将其更改为以下值之一:
无 inline inline-block block table table-cell table-row flex inline-flex
uj5u.com热心网友回复:
"D-" 是 Bootstrap 的一种实用程序,可直接影响 Display 并帮助您进行网格布局。在 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
0 评论