如何使用引导程序设置自定义 joomla 组件的样式

Posted 2023-02-23

【中文标题】如何使用引导程序设置自定义 joomla 组件的样式

【英文标题】：How can I use bootstrap to style my custom joomla component

【发布时间】：2020-01-13 07:50:42

【问题描述】：

我正在尝试设置自定义 joomla 组件的样式，但发现使用标准引导语法不起作用。

我尝试了以下方法：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">

        </div>
        <div class="col-md-8">

        </div>
    </div>
</div>

但是这些列是堆叠在一起的。我尝试在我的组件页面中添加引导 CDN，但这样做时 Joomla 菜单崩溃了。

我可以做些什么来使引导程序工作？

【问题讨论】：

你在页面中调用 bootstrap.css 吗？

@RémyTesta 是的，我包含了 CDN，但这破坏了标准的 joomla 标记

你能提供你的代码或解释你把cdn链接放在哪里。也许你的 joomla 主题已经在使用 bootstrap。尝试猜测哪个版本。您的网站在线吗？

【参考方案1】：

默认的 Joomla 3.x 模板和许多第三方 Joomla 模板使用 Bootstrap 2，因此 Bootstrap 3 或 4 列类不一定有效。

你有几个选择：

使用您的 Joomla 网站上正在加载的 Bootstrap 版本中的列类 使用第三方扩展替换使用 Bootstrap 4 加载的 Bootstrap 版本，例如Toggle Bootstrap（免费）或jQuery Easy（免费）或类似的 手动编写解决方案来替换使用 Bootstrap 4 加载的 Bootstrap 版本（有关此示例代码，请参阅https://joomla.stackexchange.com/q/4953/120 的答案） 更改为 Bootstrap 4 模板，例如 JoomShaper Helix Ultimate（免费）

我推荐最后一个选项，这将使您在接下来的 12 个月左右升级到 Joomla 4 时保持良好状态。 Joomla 4 将使用 Bootstrap 4。

【讨论】：

谢谢，我同意最后一个选项可能是最好的。

【参考方案2】：

col-md-x 只会在中等屏幕尺寸 (768px) 或更高尺寸的屏幕上激活，因为引导程序是移动优先的方法。尝试将 col-md-4 和 col-md-8 更改为 col-4 和 col-8

【讨论】：

不起作用，如果我记得 Bootstrap 在所有屏幕上都可以使用 md 如果那是你唯一的类名的话。

不，它不是这样工作的。保留您的原始代码并将窗口放大，您会看到它们会在 768px 之后捕捉到您想要的位置。如果您希望它在 0px 后对齐，请使用 col-4 和 col-8。