gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 23:40:16 24 4
gpt4 key购买 nike

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

    关于twitter-bootstrap - Bootstrap 3 响应式具有多个断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17912575/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com