Css bootstrap 3.0一行5个图像

bootstrap 3.0在一行中生成5个图像并使其响应时遇到问题？ 网格系统是以12为基础的，那么如何使5个图像看起来居中而没有任何空间呢

---

此外，当在平板电脑或智能手机上观看时，我还可以制作一个空白栏：

<div class="row">
 <div class="col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

---

要回答您的其他问题：

还有，当我在平板电脑或智能手机上观看时，我还能做些什么呢

---

您需要创建一个列类（我称之为

col-sm-5cols

，但您可以随意称呼它），其样式与Bootstrap的现有列类似，然后通过媒体查询在大小合适时为其提供20%的宽度

.col-sm-5cols{
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

@media (min-width: 768px) {
.col-sm-5cols {
        width: 20%;
        float: left;
    }
}

示例：

---

要在移动设备上设置2列，您可以使用

col-sm-6

接近，或者再次使用480px和

width:50%

的媒体查询自定义较小的列。您的意思是添加偏移量？是的，为了添加空列，您会偏移第一列col-md-2。不需要做任何事情就可以在右侧添加一个空列。现在你有2个空栏加上10个（5*2）栏的图像，=12。我明白你的意思，但是现在对于5个图像，我两边都有空格，我如何才能驾驭它们并使其100%适合这可能是最干净的开箱即用的解决方案。我希望任何其他解决方案都需要自定义CSS，此时，问题不再与引导有关。@user3150060我知道这条评论可能会让完美主义者感到困惑，但在更大的屏幕上，左右两侧都有一点额外的空间有什么错？我想知道我是否添加了额外的raw，使其成为15幅图像，我怎样才能使它在较小的屏幕上是3在一个原始？col-sm-4。这在引导文档中：。但简而言之，它都是基于12列网格，而#（col sm-#）是分隔符，所以12/4=3。

<div class="row">
 <div class="col-xs-6 col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

.col-sm-5cols{
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

@media (min-width: 768px) {
.col-sm-5cols {
        width: 20%;
        float: left;
    }
}