Fatal编程技术网

Twitter bootstrap Bootstrap 3具有多个断点

twitter-bootstrap grid responsive-design twitter-bootstrap-3

Twitter bootstrap Bootstrap 3具有多个断点,twitter-bootstrap,grid,responsive-design,fluid-layout,twitter-bootstrap-3,Twitter Bootstrap,Grid,Responsive Design,Fluid Layout,Twitter Bootstrap 3,我正在使用最新的Bootstrap 3.0 RC1，并试图构建一个图像概述，当图像变得太小（如在运球上看到的）时，具有响应性和多个断点 问题： 图像缩放仅在一条线上有两个或更少的图像时出现（它也应适用于3-4个图像） 我的断线或响应导致图像大小不同。我需要确保休息后的最大img大小与一行有4个img时的最大大小相同。例如，当分成两个或一个图像时，图像最初会比最大尺寸的图像大很多，一行4个 我希望有人能帮助我，我是一个初学者，以建立响应的东西 致意 链接到JSFIDLE: <div clas

我正在使用最新的Bootstrap 3.0 RC1，并试图构建一个图像概述，当图像变得太小（如在运球上看到的）时，具有响应性和多个断点

问题：

  • 图像缩放仅在一条线上有两个或更少的图像时出现（它也应适用于3-4个图像）
  • 我的断线或响应导致图像大小不同。我需要确保休息后的最大img大小与一行有4个img时的最大大小相同。例如，当分成两个或一个图像时，图像最初会比最大尺寸的图像大很多，一行4个
    • 我希望有人能帮助我，我是一个初学者，以建立响应的东西

    致意

    链接到JSFIDLE:

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

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

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

    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;
    }
}
    （您的浏览器必须很宽才能看到效果）

    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>

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

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

    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;
    }
}
    您似乎没有使用Bootstrap3RC1。你小提琴上的链环断了。引导RC1不再有
    .row流体

    通过让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
      ）
    演示：检查此演示：

    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>

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

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

    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:

    刚刚更改了一些css，它可以正常工作。看这把小提琴：

    那么主要的变化是:

  • box size:border box
    to.group，以便%宽度包含填充（10px）
  • 添加了
    显示：内联块
    ，并删除了.group中的
    浮动：左
    ，以及.row流体的
    文本对齐：居中
    ，以便.group元素居中对齐
  • 将
    最大宽度：350px
    和
    最大高度：150px
    添加到.group
  • 调整了不同屏幕尺寸的%宽度，以占据整个宽度，并保持最大宽度
  • 通过删除从所有屏幕的.group的公共样式继承的重复属性，清理了媒体查询中的css
    • 就这样。它在铬上工作得很好。我不在其他浏览器中测试。测试时使用完全引导

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

    例如，4.将宽度为20%、右边距和左边距分别为2.5%的元素分组，将完全适合容器（.row fluid here）中的哪个位置，而不会遗漏一个像素

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

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

    可能的重复：因为relase
    col-6
    应该是
    col-xs-6