Question

我希望在我的Joomla模板中创建一个页面，其中我将有2列，占据页面的50％，显示下面的图像和文本。我的代码如下所示：

<div id="services" class="span12">
<div id="services-img-new" class="span6"></div>
<div id="services-img-new" class="span6"></div>
</div>
<div id="services" class="span12">
<div id="services-text" class="span6">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor</p>
</div>
<div id="services-text" class="span6">
<h4>Heading 2</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>

我遇到的问题是，如果屏幕尺寸减小，那么这并没有在正确的图像下显示正确的文字，从我的代码我可以看到这显然是因为我将2个图像组合在一起并将文本组合在一起。 / p>

我如何将图像和文本组合在一起？

如果有人可以提出建议，我会非常感激。

顺便说一下，我目前正在使用Joomla 3.5.1和Twitter Bootstrap 2.3.2，因此不使用它在Bootstrap 3中的col类。

Answer 1

好的，如果我理解你正在寻找这样的东西：

<div id="services" class="span6">
<div id="services-img-new" class="span12"></div>
<div id="services-text" class="span12">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div id="services" class="span6">
<div id="services-img-new" class="span12"></div>
<div id="services-text" class="span">
<h4>Heading 2</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>

Link to jsbin example

如何在我的Joomla模板中将2个span6类堆叠在一起

1 个答案: