<div class="row rowItem">
<div class="labelTitle col-sm-3">
<h2>Section Title</h2>
</div>
<div class="labelTitle col-sm-offset-6">
<h2>Section Title</h2>
</div>
<div class="col-sm-3">
<div class="image">
<a href="#">
<img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
</div>
<div class="text">
<h4 class="font-bold">
<a href="#">Title</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p>
</div>
</div>
<div class="col-sm-3">
<div class="image">
<a href="#">
<img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
</div>
<div class="text">
<h4 class="font-bold">
<a href="#">Title</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p>
</div>
</div>
<div class="col-sm-3">
<div class="image">
<a href="#">
<img class="img-responsive" src="http://placehold.it/367x245" title=""></a>
</div>
<div class="text">
<h4 class="font-bold">
<a href="#">Title</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium tempus dolor, non consequat massa semper in. Donec consectetur blandit urna, eu dictum ipsum rutrum vitae.</p>
</div>
</div>
您可以在此处找到示例 http://diegopalma.com/test/
最后一行有 3 列。前两列属于一个章节标题,第三列属于另一个章节标题。
我设法使用第二个标题的偏移类在桌面上正确显示它,但当然我的方法不适用于移动设备。
有什么想法或建议吗?
最佳答案
这是您要找的吗?
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h2>Section Title</h2>
<div class="row">
<div class=" col-xs-12 col-sm-6">
<div class="image">
<a href="#">
<img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
</a>
</div>
</div><!--/.col-->
<div class="col-xs-12 col-sm-6">
<div class="image">
<a href="#">
<img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
</a>
</div>
</div><!--/.col-->
</div><!--/.row-->
</div><!--/.col-->
<div class="col-xs-12 col-sm-6">
<h2>Section Title</h2>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="image">
<a href="#">
<img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
</a>
</div>
</div><!--/.col-->
<div class="col-xs-12 col-sm-6">
<div class="image">
<a href="#">
<img src="http://placehold.it/367x245" class="img-responsive col-xs-12" style="padding:0;" title="">
</a>
</div>
</div><!--/.col-->
</div><!--/.row-->
</div><!--/.col-->
</div><!--/.row-->
关于css - 我在同一行中有两个标题,但我不知道如何布局页面以使其在移动设备上运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34300798/