是否可以添加额外的大小来响应 Bootstrap ?现在 Bootstrap 的大小如下:
WPW Container Max-Width
sx < 576px - none
sm > 567px - 540px
md > 768px - 720px
lg > 992px - 960px
xl > 1200px - 1140px
xxl > 1400px - 1320px
字符串
我想添加另一个像xxl > 1580 px-1500 px
我想添加这个,因为我想要一个最大宽度为1500 px的容器,并且能够以一种适合一行5列的方式划分行的列。
到目前为止,我把它添加到我的CSS
@media (min-width: 1580px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1500px;
}
}
型
这只会使容器变大,不会调整col的大小,如果我使用xxl={2}
或xxl={2.2}
,我仍然会得到4个项目/行。
2条答案
按热度按时间3yhwsihp1#
作为explained here,没有办法获得react-bootstrap属性来识别额外的断点(即:
xxxl={5}
)但是,您可以使用SASS向Bootstrap添加额外的断点,然后将适当的Bootstrap
row-cols-{breakpoint}-{size}
类引用为className
。https://codeply.com/p/z7Oqx8giVL的
下面是如何使用SASS生成额外的xxxl网格断点。仅仅在CSS中添加容器大小更改是不够的...
SASS:
字符串
标记:
型
Demo的
0g0grzrc2#
在Bootstrap 5中,网格系统基于flex容器和flex项。如果您想为额外的断点自定义网格系统,您可以为新断点创建自定义CSS类,并将其应用于特定元素。
下面是一个示例,说明如何为新断点创建自定义类,并将其与React Bootstrap一起使用:
CSS代码:
字符串
然后,在你的React组件中,你可以使用这个自定义类:
型