twitter-bootstrap - Bootstrap 3 响应式具有多个断点

Question

我正在使用最新的 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%;
  }
}

Answer 1

您似乎没有使用 Bootstrap 3 RC1。您 fiddle 中的链接已损坏。 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)

演示: http://bootply.com/70929