css 带Bootstrap包的Typo3:如何更改主内容列的填充

zlhcx6iw  于 2023-04-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(89)

我正在管理我们当地体育俱乐部的主页,可以在svwalddorf.de下找到。该页面使用typo 3 10.4.22和bootstrap包11.0.3运行。
bootstrap的基本模板在中心内容区域On our site this currently looks like this.的每一侧都留下了大量的空白空间(不幸的是还不允许包含图像)
虽然这看起来很不错,但它浪费了很多空间。因此,我想改变填充区域的大小(标记为红色),以便有更多的内容空间。
我很确定我只需要在正确的css文件中找到正确的行。毕竟,靠近顶部的灰色carousel元素使用了整个宽度。我只是不知道要找什么。有人能告诉我正确的方向吗?
非常感谢你提前!

odopli94

odopli941#

SCSS中有一个Map,它包含$grid-breakpoints变量中定义的每个断点的容器的最大宽度。您可以使用TypoScript设置此Map的值,如下所示:

plugin.bootstrap_package.settings.scss {
   container-max-widths= (  sm: 540px,  md: 720px,  lg: 960px,  xl: 1140px,  xxl: 1320px)
}

$grid-breakpoints变量定义断点及其对应的宽度:

$grid-breakpoints: (  xs: 0,  sm: 576px,  md: 768px,  lg: 992px,  xl: 1200px,  xxl: 1400px )

要增加容器的大小,有两种选择。您可以直接在容器类上设置max-width属性,如下所示:

.container { max-width: 80%; }

我的建议是,更新container-max-widthsMap中的值,为每个断点设置不同的最大宽度:

container-max-widths= (  sm: 540px,  md: 720px,  lg: 992px,  xl: 1200px,  xxl: 1400px)

只要确保设置的值不高于$grid-breakpoints中定义的值即可。
请看:

相关问题