Bootstrap 的全屏轮播在 TYPO3 中没有显示为全屏
Bootstrap's fullscreen carousel does not show up as full-screen in TYPO3
我已将 Bootstrap 的轮播作为内容元素添加到我的 TYPO3 网站。我使用的轮播类型是 carousel_fullscreen。但是,轮播不会覆盖整个屏幕。见图:
当我查看源代码时,我认为这可能是因为轮播被包装在 div 中, 'container' 作为 class。如何确保轮播图覆盖整个屏幕?
正如您从 Bootstrap documentation 中看到的那样,container
class 有一个固定的 max-width
(对于每个断点)。我想你可以使用 container-fluid
class 来覆盖视口的整个宽度。
在大多数情况下(但这取决于个人设置并且没有通用规则)
<div class="container">
包含页面的所有内容元素,它是 page 模板的一部分;
如果您使用著名的 bootstrap_package extension,它会提供所有使用 FLUIDTEMPLATE 对象的页面模板,您要查找的文件位于文件夹
EXT:bootstrap_package/Resouces/Private/Templates/Page
您必须找到您的页面当前使用的是哪一个。
我强烈建议不要自己修改这些文件,而是创建自己的扩展(通常称为“前端提供程序”或“site package") 并通过将这些文件存储在那里并覆盖它们的路径来覆盖这些文件;如果您还不知道该怎么做,您可以使用此站点 https://www.sitepackagebuilder.com/new/ 为此目的构建一个新的扩展程序。
EXT:boostrap_package 带有一个 TypoScript 常量
page.fluidtemplate.templateRootPath
你可以用它;所以在你的扩展中会有一个 Typoscript 常量,比如:
page.fluidtemplate.templateRootPath = EXT:yourextensionname/Resources/Private/Templates/Page/
只需将要修改的EXT:bootstrap_package模板文件复制到这个新路径即可使用。
如果您的页面模板不是EXT:bootstrap_package本身提供的,那么很可能您已经在使用"sitepackage"扩展,您可以修改其文件;找到它的方法可能是:
1) 以管理员身份进入TYPO3后台,点击"Template"模块
2)点击带有TypoScript模板的页面(通常是主页)
3) 在上部下拉菜单 select "TypoScript Object Browser"
4) 确保您正在浏览 "Setup" 树(还有另一个下拉菜单)
5)在那棵树上,你可以展开节点并搜索"page"节点;展开其中的所有内容并搜索以“= FLUIDTEMPLATE”结尾的节点;它可能是这样的:
在此示例中,"bhsiteconf" 是我的网站包的名称; EXT:bhsiteconf
是 /typo3conf/extensions/bhsiteconf
的缩写形式,因此您必须在该路径上查找要搜索的模板文件(扩展名当然会有所不同)
我已将 Bootstrap 的轮播作为内容元素添加到我的 TYPO3 网站。我使用的轮播类型是 carousel_fullscreen。但是,轮播不会覆盖整个屏幕。见图:
当我查看源代码时,我认为这可能是因为轮播被包装在 div 中, 'container' 作为 class。如何确保轮播图覆盖整个屏幕?
正如您从 Bootstrap documentation 中看到的那样,container
class 有一个固定的 max-width
(对于每个断点)。我想你可以使用 container-fluid
class 来覆盖视口的整个宽度。
在大多数情况下(但这取决于个人设置并且没有通用规则)
<div class="container">
包含页面的所有内容元素,它是 page 模板的一部分;
如果您使用著名的 bootstrap_package extension,它会提供所有使用 FLUIDTEMPLATE 对象的页面模板,您要查找的文件位于文件夹
EXT:bootstrap_package/Resouces/Private/Templates/Page
您必须找到您的页面当前使用的是哪一个。
我强烈建议不要自己修改这些文件,而是创建自己的扩展(通常称为“前端提供程序”或“site package") 并通过将这些文件存储在那里并覆盖它们的路径来覆盖这些文件;如果您还不知道该怎么做,您可以使用此站点 https://www.sitepackagebuilder.com/new/ 为此目的构建一个新的扩展程序。
EXT:boostrap_package 带有一个 TypoScript 常量
page.fluidtemplate.templateRootPath
你可以用它;所以在你的扩展中会有一个 Typoscript 常量,比如:
page.fluidtemplate.templateRootPath = EXT:yourextensionname/Resources/Private/Templates/Page/
只需将要修改的EXT:bootstrap_package模板文件复制到这个新路径即可使用。
如果您的页面模板不是EXT:bootstrap_package本身提供的,那么很可能您已经在使用"sitepackage"扩展,您可以修改其文件;找到它的方法可能是:
1) 以管理员身份进入TYPO3后台,点击"Template"模块 2)点击带有TypoScript模板的页面(通常是主页) 3) 在上部下拉菜单 select "TypoScript Object Browser" 4) 确保您正在浏览 "Setup" 树(还有另一个下拉菜单) 5)在那棵树上,你可以展开节点并搜索"page"节点;展开其中的所有内容并搜索以“= FLUIDTEMPLATE”结尾的节点;它可能是这样的:
在此示例中,"bhsiteconf" 是我的网站包的名称; EXT:bhsiteconf
是 /typo3conf/extensions/bhsiteconf
的缩写形式,因此您必须在该路径上查找要搜索的模板文件(扩展名当然会有所不同)