twitter-bootstrap Bootstrap 3 响应多个断点

Question

提问by charliexx

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).

我正在使用最新的 Bootstrap 3.0 RC1 并尝试在图像变得太小时（如在 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.

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

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

我希望有人可以帮助我，我是构建响应式东西的初学者..

Best regards

最好的祝福

Link to jsfiddle:

链接到 jsfiddle：

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

http://jsfiddle.net/6dckB/（浏览器一定要大才能看到效果）

HTML:

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:

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

回答by Zim

It doesn't appear that you are using Bootstrap 3 RC1. The link in your fiddle is broken. Bootstrap RC1 doesn't have .row-fluidanymore.

您似乎没有使用 Bootstrap 3 RC1。您小提琴中的链接已损坏。Bootstrap RC1 没有.row-fluid了。

You could just simplify everything by letting the responsive features in 3 do the work for you. BS3 now has 3 grid sizes -- tiny, small and large that are used to manipulate display on different devices / widths. You could do something like this..

您可以通过让 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>

That will get you..

那会让你..

4 per row on large screens (col-lg-3)
3 per row on tablets (col-sm-4)
2 per row on "tiny" phones (col-6)

大屏幕上每行 4 个 ( col-lg-3)
平板电脑上每行 3 个 ( col-sm-4)
“微型”手机 ( col-6)每行 2 个

Demo: http://bootply.com/70929

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

Answer 2

回答by Jithesh

Just changed some css and it works. See this fiddle: http://jsfiddle.net/J3F99/

只是更改了一些 css，它可以工作。看到这个小提琴：http: //jsfiddle.net/J3F99/

Well, the major changes being:

嗯，主要的变化是：

box-sizing: border-boxto .group so that the % width is inclusive of the padding(10px).
Added display: inline-blockto and removed the float: leftin .group, and text-align: centerto .row-fluid so that the .group elements are centre aligned.
Added max-width: 350pxand max-height: 150pxto .group
Adjusted % widths for different screen sizes to take up the full width and still maintaining the max-width
Cleaned up css in media queries by removing duplicate properties that is already inherited from common style for .group for all screens

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

Thats it. It works well in chrome. I din't test in other browsers. Use full bootstrap while testing.

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

The main problem here is the padding, given in pixels. To ensure clean fluid layout you should use % instead if pixels. And for that you have to use margin rather than padding for .group. Because, margin in % depends on the container width.

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

For example, 4 .group elements with width 20% and margin-right and margin-left 2.5% will fit exactly whithin the container(.row-fluid here) without leaving out a single pixel.

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

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

I recommend you to go with that method. See @Bharat Parmar's answer for that.

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

Answer 3

回答by Arbaoui Mehdi

Check this demo: http://depotwebdesigner.com/responsive/

检查这个演示：http: //depotwebdesigner.com/responsive/

HTML:

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:

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/

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

twitter-bootstrap Bootstrap 3 响应多个断点

提问by charliexx

回答by Zim

回答by Jithesh

回答by Arbaoui Mehdi

相关推荐

最近更新

标签

twitter-bootstrap Bootstrap 3 响应多个断点

提问by charliexx

回答by Zim

回答by Jithesh

回答by Arbaoui Mehdi

相关推荐

twitter-bootstrap 如何使用引导程序的表 table-hover 类突出显示数据列表中的一行

twitter-bootstrap 日期选择器返回未捕获的 typeError: undefined 'currentDay'

twitter-bootstrap Bootstrap：条纹 div 表

twitter-bootstrap 将数据传递给 Bootstrap 模态

相关推荐

最近更新

标签