如何使用 bootstrap 来设置自定义 joomla 组件的样式

Question

我正在尝试设置自定义 joomla 组件的样式，但发现使用标准 bootstrap 语法无效。

我尝试了以下方法：

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

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

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

但柱子相互堆叠。我尝试在我的组件页面中添加 bootstrap CDN，但是这样做时 Joomla 菜单会崩溃。

我该怎么做才能使 bootstrap 工作？

Answer 1

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

Answer 2

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

您有几个选择：

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

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

如何使用 bootstrap 来设置自定义 joomla 组件的样式

How can I use bootstrap to style my custom joomla component

css

joomla

components

twitter-bootstrap