twitter-bootstrap - Bootstrap 3 responsive with multiple break points

Question

I'm using latest Bootstrap 3.0 RC1 and trying to build an image overview with responsiveness and multiple break points when the images becomes too small (like seen on Dribbble).

Issues:

The image scaling only appears when there's two or less on an line (it should work with 3-4 images as well)
My break lines OR the responsiveness cause different image sizes. I need to make sure that the max img size after breaks is the same as max size when there's 4 on a row. Example when breaking into two or one the images will initially appear much larger than the largest size with 4 in a row.

I hope someone can help me out, I'm a beginner to building responsive stuff..

Best regards

Link to jsfiddle:

http://jsfiddle.net/6dckB/ (your browser must be wide to see the effects)

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%;
  }
}

score 12 · Accepted Answer

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

score 1 · Accepted Answer

只是改变了一些CSS，它的工作原理。看到这个小提琴：http: //jsfiddle.net/J3F99/

嗯，主要的变化是：

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

而已。它在 chrome 中运行良好。我没有在其他浏览器中测试。测试时使用完整的引导程序。

这里的主要问题是填充，以像素为单位。为确保干净流畅的布局，您应该使用 % 代替像素。为此，您必须对 .group 使用边距而不是填充。因为，百分比的边距取决于容器宽度。

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

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

我建议你使用这种方法。请参阅@Bharat Parmar 对此的回答。

score 0 · Accepted Answer

检查这个演示： 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/

twitter-bootstrap - Bootstrap 3 responsive with multiple break points

3 回答 3

Related

Reference