我正在使用最新的Bootstrap 3.0 RC1并尝试在图像变得太小时(如在Dribbble上看到的那样)构建具有响应性和多个断点的图像概览.
问题：
>图像缩放仅在一行中有两个或更少时出现(它也应该与3-4个图像一起使用)
>我的断线或响应性导致不同的图像大小.我需要确保断开后的最大img大小与最大大小相同,当一行有4个时.分成两个或一个图像的示例最初看起来比最大尺寸大得多,连续4个.
我希望有人可以帮助我,我是一个初学者来构建响应的东西..
最好的祝福
链接到jsfiddle：
http://jsfiddle.net/6dckB/(您的浏览器必须宽视图才能看到效果)
HTML：
<div class="container">
<ul class="row-fluid">
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
</ul>
</div>
CSS：
.row-fluid {
padding-left: 0;
list-style: none;
}
.row-fluid:before,.row-fluid:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.row-fluid:after {
clear: both;
}
.row-fluid:before,.row-fluid:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.row-fluid:after {
clear: both;
}
@media (min-width: 768px) {
.row-fluid {
margin-left: -10px;
margin-right: -10px;
}
}
.row-fluid .row {
margin-left: -10px;
margin-right: -10px;
}
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 50%;
margin-bottom: 20px;
}
@media (max-width: 400px) {
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 33.33333333333333%;
}
}
@media (min-width: 992px) {
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 25%;
}
}
解决方法
您似乎没有使用Bootstrap 3 RC1.小提琴中的链接被打破了. Bootstrap RC1不再具有.row-fluid.
你可以通过让3中的响应功能为你工作来简化一切. BS3现在有3种网格尺寸 – 微小,小和大,用于操纵不同设备/宽度的显示.你可以这样做..
<div class="row">
<div class="col-lg-3 col-sm-4 col-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-sm-4 col-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
...
</div>
那会得到你..
大屏幕每行> 4(col-lg-3)
平板电脑每排> 3(col-sm-4)
>“小”手机每排> 2(col-6)