PHP 单个模块位置可变数量模块的代码

Question

我正在使用 Bootstrap 4.0 从头开始创建 Joomla 3.8 模板。同时我也在自学Bootstrap 4.0和PHP，所以请多多包涵。

在主要组件区域下，我有一个 full-width 位置，我称之为 'feature_bottom'。目前，我有两个模块分配给那个职位。在宽桌面屏幕上，它们垂直堆叠，每个都是全宽，但我希望它们 side-by-side 直到较小的设备断点。在另一个菜单项上，该位置可能有三个或四个模块，因此 hard-coding 模块的列宽不起作用。

在我的 index.php 中 body:

<?php if ($this->countModules('featurebottom')) : ?>                          
  <div class="container-fluid">
       <div class="row">
        <div id="featurebottom" class="<?php echo $featurebottom_width; ?> featurebottom">
            <jdoc:include type="modules" name="featurebottom" style="xhtml"/>
        </div>
       </div>
    </div>
<?php endif; ?>

我无法解决的是如何以及在何处告诉模板在中等屏幕上如果在 feature_bottom 位置有两个模块那么它们应该是 side-by-side 和 [=每个 48=]-6，如果有三个模块，则它们是 side-by-side，每个 col-md-4，每个四个模块 col-md-3，依此类推，最多十二个模块分布在三个每行 col-md-4。

我已经在 head 标签上面试过这段代码（最多只有 4 个模块用于测试目的）：

<?php if ($featurebottom == 2) {
    $featurebottom_width = "col-md-6";
} elseif ($featurebottom == 3) {
    $featurebottom_width = "col-md-4";
} elseif ($featurebottom == 4) {
    $featurebottom_width = "col-md-3";
} else {
    $featurebottom_width = "col-md-12";
}
?>

...但是没有任何反应。这两个模块仍然堆叠在一起。

我做错了什么？

模板可以在这里查看：https://www.vanillasponge.co.uk

更新：27.02.18

如果我通过浏览器的 Web Developer > Inspector 手动编辑页面并在 'moduletable' 之后添加 class 'col-md'（对于每个实例），我可以获得我想要的效果（见图）。

Screenshot of manually adjusted modules

如果我在 Joomla 模块高级选项卡中添加“col-md”作为模块 Class 后缀，那么它也（有点）有效，但是 a) 它在模块标题，和 b) 我不想手动执行此操作，主要是因为我的技术不太熟练的客户将来可能不得不在未来 18 年更新他们当前的 Joomla 模板时使用此模块的一个版本几个月左右才能使用 Bootstrap 4. 我不能保证他们会记得添加模块 class 后缀。

Answer 1

我认为你很接近，看看这对你有用吗？

计算 featurebottom 中模块项的数量

此逻辑的 Joomla 方法是 countModules https://docs.joomla.org/Counting_modules_in_a_given_module_position

<?php if($this->countModules('featurebottom') == 2){
    $featurebottom_items = "two";
} elseif ($this->countModules('featurebottom') == 3) {
    $featurebottom_items = "three";
} elseif ($this->countModules('featurebottom') == 4) {
    $featurebottom_items = "four";
} else {
    $featurebottom_items = "one";
}
?>

将上面的class应用到#featurebottom

<?php if ($this->countModules('featurebottom')) : ?>                          
  <div class="container-fluid">
       <div class="row">
        <div id="featurebottom" class="<?php echo $featurebottom_items; ?> featurebottom">
            <jdoc:include type="modules" name="featurebottom" style="xhtml"/>
        </div>
       </div>
    </div>
<?php endif; ?>

将 class 添加到您的模块

对于将在 featurebottom 中输出的每个模块，转到模块 > 高级 > 模块 class 后缀并添加 ' featurebottom_item'（没有引号，但有前导 space）

CSS 设置模块宽度的样式

#featurebottom .featurebottom_item{
width:100%;
position: relative;   /* replicate Bootstap column styling */
padding-right: 15px;
padding-left: 15px;
} 

 @media (min-width: 992px){
 #featurebottom.one .featurebottom_item{
 width:100%;
 }

 #featurebottom.two .featurebottom_item{
 width:50%;
 float:left;
 }

 #featurebottom.three .featurebottom_item{
 width:33%;
 float:left;
 }

 #featurebottom.four .featurebottom_item{
 width:25%;
 float:left;
 }
 }

您可能需要在 CSS 中使用填充和边距，您甚至可能需要添加 display:inline-block; 之类的规则，而我的 php 代码未经测试。你是如此接近，但我认为你可以从这里拿走它。

祝你好运！

Answer 2

我找到了答案（感谢 jquery website）。它所需要的只是一个微小的 jquery 脚本添加到我的 index.php 文件的最底部，就在结束 body 标签之前（加上开始和结束脚本标签，这里没有显示：

<script>
$( ".feature-bottom > div" ).addClass( "col-md" );
</script>

对于像我这样对 Jquery 知之甚少的人来说，这意味着：

.feature-bottom是parentdiv,[=12=的class ]
> div 表示 parent 的 child div，并且
.addClass 将预定义的 css class 添加到 children。可以在双引号内添加多个 class，每个用 space 分隔，就像在 html.

PHP 单个模块位置可变数量模块的代码

PHP code for variable numbers of modules in a single module position

php

bootstrap-4

joomla3.0