twitter-bootstrap – Bootstrap 3响应多个断点

发布时间：2020-12-18 00:28:08 所属栏目：安全来源：网络整理

导读：我正在使用最新的Bootstrap 3.0 RC1并尝试在图像变得太小时(如在Dribbble上看到的那样)构建具有响应性和多个断点的图像概览. 问题：图像缩放仅在一行中有两个或更少时出现(它也应该与3-4个图像一起使用) 我的断线或响应性导致不同的图像大小.我需要确保断开

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!