Question

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

我尝试了以下操作：

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

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

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

但这些列相互堆叠。我曾尝试在组件页面中添加引导CDN，但这样做时Joomla菜单会崩溃。

如何使引导程序起作用？

Answer 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。

Answer 2

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

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

2 个答案: