我遇到了一个问题,当超大 Bootsrap 4 最大容器宽度(即 1140 像素)不够宽时。因为我希望我的网站在大显示器上也看起来不错,而且 Bootstrap 网格非常窄。扩展最大宽度最简单的方法是覆盖 .container 最大宽度,例如:
@media (min-width: 1200px) {
.container {
max-width: 1540px;
}
}
但我不只是想扩展
xl max-width
.我希望添加一个新的成熟断点,包括所有 BS4 网格可能性、列、显示模式、间距等。像 col-xxl
或者其他的东西。结果应该如下所示:<div class="col-xxl-2 col-xl-3 col-md-4 col-sm-6 text-xxl-center"></div>
任何想法,如何使用CSS正确地做到这一点?
最佳答案
使用SASS
在您的元素中添加文件custom.scss
(你可以选择任何你想要的名字)
添加
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1600px
);
@import "~bootstrap/scss/bootstrap";
现在您可以使用
xxl
在 Bootstrap 中 mixins
但是如果你想使用 col-xxl-*
,需要编译custom.scss
与 node-sass
并使用该编译的 Bootstrap 文件作为您当前的 Bootstrap 文件。文档:https://getbootstrap.com/docs/4.4/layout/grid/#grid-tiers
其他解决方案
使用以下站点创建断点并下载后。
https://themestr.app/customize
关于html - 如何在 Bootstrap 4 中添加新的大断点(仅限 CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61423427/