如何關閉Joomla span類

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

最好的方法可能是添加一些自定義CSS以及類似或類似的媒體查詢：

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

自定義CSS文件優於編輯HTML或PHP代碼，因為您的更改不太可能被以后的更新覆蓋。