Question

您好我正在寻找如何更改我的某些模块在移动设备上显示的方式。

目前，我的index.php文件中包含以下内容：

<div id="leftcol" class="span8"><jdoc:include type="modules" name="welcome" style="xhtml" /></div>
<div id="rightcol" class="span4"><jdoc:include type="modules" name="laptop" style="xhtml" /></div>

它显示了2并排，但我希望在移动屏幕上观看时将它们放在彼此之上，即：

<div id="leftcol" class="span12"><jdoc:include type="modules" name="welcome" style="xhtml" /></div>
<div id="rightcol" class="span12"><jdoc:include type="modules" name="laptop" style="xhtml" /></div>

但我不确定我是如何实现这一点的。真的很感激一些建议。

Answer 1

最佳方法可能是add some custom CSS使用类似或类似的媒体查询：

@media only screen and (max-width: 767px) {
  #leftcol.span8 {float: none; width: 100%;}
  #rightcol.span4 {float: none; width: 100%;}
}

自定义CSS文件比编辑HTML或PHP代码更受欢迎，因为您的更改不太可能被未来的更新覆盖。

如何关闭Joomla span类

1 个答案: