Bootstrap 3响应多个断点

时间：2013-07-28 20:31:13

标签： twitter-bootstrap grid responsive-design fluid-layout twitter-bootstrap-3

我正在使用最新的Bootstrap 3.0 RC1并尝试在图像变得太小时（如在Dribbble上看到的那样）建立具有响应性和多个断点的图像概览。

的问题：

  1. 图像缩放仅在一行中有两个或更少时出现（它也应该与3-4个图像一起使用）
  2. 我的断线或响应性会导致不同的图像尺寸。我需要确保断开后的最大img大小与最大大小相同，当连续4个时。分成两个或一个图像的示例最初看起来比最大尺寸大得多，连续4个。

    3. 我希望有人可以帮助我，我是初学者，可以建立自适应的东西......

    祝你好运

    链接到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%;
  }
}

3 个答案:

答案 0 :(得分：12)

您似乎没有使用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

答案 1 :(得分：1)

刚刚更改了一些CSS并且它有效。看到这个小提琴：http://jsfiddle.net/J3F99/

嗯，主要的变化是：

  1. box-sizing: border-box到.group，以便％宽度包含填充（10px）。
  2. 添加了display: inline-block并删除了.group中的float: left和text-align: center添加到.row-fluid，以便.group元素居中对齐。
  3. 将max-width: 350px和max-height: 150px添加到.group
  4. 调整不同屏幕尺寸的％宽度以占据整个宽度并仍然保持最大宽度
  5. 通过删除已从所有屏幕的.group的常用样式继承的重复属性来清除媒体查询中的css

    6. 多数民众赞成。它适用于铬。我不会在其他浏览器中测试。在测试时使用完整的引导程序。

    这里的主要问题是填充，以像素为单位。为了确保清洁的流体布局，您应该使用％而不是像素。为此，您必须使用保证金而不是填充.group。因为，％的边距取决于容器宽度。

    例如，4个.group元素的宽度为20％，margin-right和margin-left 2.5％将完全适合容器（.row-fluid），而不会遗漏任何一个像素。

    4 * 20 + 4 * 2.5 * 2 = 100％

    我建议你使用那种方法。请参阅@Bharat Parmar的答案。

答案 2 :(得分：0)

查看此演示： http://depotwebdesigner.com/responsive/

<强> HTML： 

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Responsive Image</a>
    <div class="nav-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

<!-- Responsive Image -->
<div class="container">
  <div class="starter-template">
    <ul>
      <li><img src="http://dribbble.s3.amazonaws.com/users/31348/screenshots/1185698/slightly_stoopid_teaser.jpg" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/12/screenshots/1185739/google_chromescreensnapz001_teaser.png" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/22225/screenshots/1185692/cooper_workshop_teaser.jpg" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/565/screenshots/1186432/kreyos_sport_mode_1x.jpg" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/6014/screenshots/1186351/oliver.jpg" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/93631/screenshots/1185715/drip-lion.jpg" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/104062/screenshots/1186702/pw_1x.png" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/7528/screenshots/1186361/genesisproject_1x.jpg" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/2896/screenshots/1186026/free_to_be_1x.png" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/2559/screenshots/1185760/screen_shot_2013-08-06_at_10.32.27_am.png" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/4737/screenshots/1178958/untitled-1_1x.png" alt=""></li>
      <li><img src="http://dribbble.s3.amazonaws.com/users/4737/screenshots/1186176/site_1x.jpg" alt=""></li>
    </ul>
  </div>
</div>

<强> CSS： 

body {
  padding-top: 50px;
  background: #f8f8f8;
}
img {  
    max-width: 100%;
    max-height: 150px;
}

ul{
    padding: 0;
}

.content {
    width: 970px;
    margin: 0 auto;
}

.starter-template {
    margin-top: 10px;
}

.starter-template li {
    width: 20%;
    position: relative;
    float:left;
    list-style: none;
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
    margin-right: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

@media (max-width: 315px) {
    .starter-template li {
        margin: 0 0 3px 3px !important;
    }
}

@media (max-width: 735px) and (min-width: 450px) {
    .starter-template li {
        width: 30%;
        margin-right: 0;
        margin-left: 15px;
    }
}

@media (max-width: 450px) {
    .starter-template li {
        width: 45%;
        margin-right: 20px; 
        margin-left: 10px;
    }
    .starter-template li:nth-child(2n){
        margin-left: 0;
        margin-right: 0;
    }
}

jsfiddle：http://jsfiddle.net/VJBjL/5/

相关问题
最新问题