Html 仅限移动设备上的引导3断行
我在bootstrap 3和一些缩略图上遇到了问题,尽管我使用了相同的代码,并且图像大小完全相同,但在移动设备上,最后一个图像行仅在垂直方向上断开 代码如下:Html 仅限移动设备上的引导3断行,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我在bootstrap 3和一些缩略图上遇到了问题,尽管我使用了相同的代码,并且图像大小完全相同,但在移动设备上,最后一个图像行仅在垂直方向上断开 代码如下: <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="?service=
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=4">
<img class="img-responsive" src="http://mysite/tn-1_256x300.jpg" alt="">
<div class="text-center text_margin">styling</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=5">
<img class="img-responsive" src="http://mysite/tn-2_256x300.jpg" alt="">
<div class="text-center text_margin">colour</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=6">
<img class="img-responsive" src="http://mysite/tn-3_256x300.jpg" alt="">
<div class="text-center text_margin">extensions</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=7">
<img class="img-responsive" src="http://mysite/tn-4_256x300.jpg" alt="">
<div class="text-center text_margin">hair enhancements</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=8">
<img class="img-responsive" src="http://mysite/tn-5_256x300.jpg" alt="">
<div class="text-center text_margin">smoothing treatment</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=9">
<img class="img-responsive" src="http://mysite/tn-6_256x300.jpg" alt="">
<div class="text-center text_margin">hair up</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="meet-the-team">
<img class="img-responsive" src="http://mysite/tn-7_256x300.jpg" alt="">
<div class="text-center text_margin">meet the team</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="/price-list/">
<img class="img-responsive" src="http://mysite/tn-8_256x300.jpg" alt="">
<div class="text-center text_margin">price list</div>
</a>
</div>
</div><!--end row-->
</div><!--end container-->
检查您的文本边距类,在引导中为某些项目添加边距或填充时,您可以更改列的宽度。发生这种情况是因为缩略图下方的某些文本正在环绕,因此缩略图高度不同。解决此问题的一种方法是使用CSS清除移动设备上的浮动列,如下所示
@media (max-width: 768px) {
.row > .col-xs-6:nth-child(2n+1) {
clear: left;
}
}
演示1:
另一个选项(更简单)是在文本DIV上使用CSS文本溢出省略号,因为正是这些DIV导致每个缩略图上的高度不同。当缩略图高度相同时,行换行不是问题
演示2:您的“平滑处理”标题下面没有填充或空白吗?看起来很接近打破浮动对齐。可能是您为图像容器设置了一个高度。然后标题占2行的图像超出了可用的高度,这导致图像容器bellow被推到右侧。我刚刚用firebug检查了它,看起来wordpress自动给它一个高度和宽度:o/I已经删除了我添加的每一个内联css,文本仍在页面顶部缩略图