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

我正在使用Bootstrap 4.0从头开始创建一个Joomla 3.8模板。同时，我一直在自我教育Bootstrap 4.0和PHP，所以请忍受我。

在主组件区域下，我有一个我称为" feature_bottom"的全宽位置。目前，我有两个模块分配给该位置。在宽阔的桌面屏幕上，它们垂直堆叠，每个宽度均匀，但我希望它们并排直到设备较小的断点为止。在另一个菜单项上，该位置可能有三个或四个模块，因此对模块的列宽度进行了硬编码。

在我的index.php中，我的身体中有此代码：

<?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位置中有两个模块，则它们应与Col-Md-6并排，如果它们有三个模块并排，每个模块与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开发人员> Inspector手动编辑页面，并在"调制可调节"之后添加类" Col-Md"(对于每个实例(，我可以完全获得我想要的效果(请参阅图像(。

手动调整模块的屏幕截图

如果我在Joomla模块高级选项卡中添加" col-md"为模块类后缀，则它也可以(一种(起作用，但是a(它在模块标题下方的主要内容兼容，b(``这是要手动执行此操作，主要是因为我的技术客户可能不得不在未来的18个月左右更新其当前的Joomla模板以将来使用该模块的版本来使用此模块的版本引导4.我不能保证他们会记得添加模块类后缀。

我认为您很接近，看看这是否对您有用？

计算功能Bottom中的模块项目数

此逻辑的JOOMLA方法是countModuleshttps://docs.joomla.org/counting_modules_in_a_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";
}
?>

将上面的类应用于#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; ?>

在模块中添加一类

对于每个将在功能上输出的模块，转到模块>高级>高级>模块类后缀并添加'featurebottom_item'(没有引号，但带有领先空间(

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代码未经测试。您是如此接近，以至于我认为您可以从这里拿走它。

祝你好运！

我找到了答案(感谢jQuery网站(。它只需要在关闭字体标签之前添加到我index.php文件底部的小jQuery脚本(加上打开和关闭的脚本标签，在这里不显示：

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

这意味着那些对我一无所知的人，是：

.feature-bottom 是父级的类，
>div 是指父母的孩子，
.addclass 向这些孩子添加了预定义的CSS类。可以在双引号中添加多个类，每个类别都与空间分开，就像您在html中一样。

相关内容

最新更新

热门标签：