Example Fiddle

Question

我使用简单的bootstrap设置了一行图像：

<div class="row top-shows">
    <div class="col-sm-2"><img src="http://placehold.it/380x600" class="img-responsive"/></div>
    <div class="col-sm-2"><img src="http://placehold.it/380x600" class="img-responsive"/></div>
    <div class="col-sm-2"><img src="http://placehold.it/380x600" class="img-responsive"/></div>
    <div class="col-sm-2"><img src="http://placehold.it/380x600" class="img-responsive"/></div>
    <div class="col-sm-2 hiden-xs hiden-sm"><img src="http://placehold.it/380x600" class="img-responsive"/></div>
    <div class="col-sm-2 hiden-xs hiden-sm"><img src="http://placehold.it/380x600" class="img-responsive"/></div>
</div>

当我希望它们均匀分布时，这可以正常工作，但我不希望它们均匀分布。我希望它们并排粘在一起，整个行都要居中。因此只填充第一张和最后一张图像。我该怎么做？

另请注意，最后2张图片在xs级别的hidden-xs屏幕上消失。

Answer 1

你可以像这样用.row类包装img标签。

    <div class="row top-shows">
        <div class="col-sm-2"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2 hide-xs"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2 hide-xs"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
    </div>

检查样本小提琴http://jsfiddle.net/dyaa/fr656ykv/

如果您想将其居中，那么您只需要在第一个和最后一个中填充

<div class="container">
    <div class="row top-shows">
        <div class="col-sm-2"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2 hide-xs"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
        <div class="col-sm-2 hide-xs"><div class="row"><img src="http://placehold.it/380x600" class="img-responsive"/></div></div>
    </div>
</div>

检查样本小提琴http://jsfiddle.net/dyaa/fr656ykv/1/

Answer 2

如果您不希望您的解决方案具有侵扰性，请尝试以下操作：

   .row.top-shows > .col-sm-2 {   // or .row.top-shows > [class^="col-"] for any col- classes
      padding:0px !important;   
      margin :0px !important;
    }

这将实现您的目标，而无需修改当前的html结构。这也是一种独有的方法，变化不会触及其他元素。

Answer 3

如果你想在HTML中避免额外的标记（提示：你应该），你可能想尝试这样的事情：

Example Fiddle

具体来说，您的行上有这个课程：.rem-margin-children

并将此CSS添加到您网站的CSS文件中：

.rem-space-children > * {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

更新

如果你想要行级别的空格，只需添加这个CSS：

.rem-space-children { margin: 0 20px; }

Example Fiddle

Answer 4

完全CSS解决方案：

.top-shows {
  margin-left: 0;
  margin-right: 0;
}

.top-shows [class^="col-"] {
  padding-right: 0;
  padding-left: 0;
}

fiddle

在引导程序中居中一行图像，它们之间没有填充

4 个答案:

Example Fiddle

更新