Question

我有：

head

实例：https://jsfiddle.net/t814cmts/10/

我想删除cols之间的填充，所以我添加到css：

<div class="container" style="background-color: red">
  <div class="row">
    <div class="col-xs-3">
      <div style="background-color: green;">1111<br /><img src="http://i.imgur.com/45IxCbL.png"  class="img-responsive img-circle center-block" style=""></div>
    </div>
    <div class="col-xs-3">
      <div  style="background-color: blue">222<br /><img src="http://i.imgur.com/45IxCbL.png"  class="img-responsive img-circle center-block" style=""></div>
    </div>
    <div class="col-xs-3">
      <div style="background-color: yellow">333<br /><img src="http://i.imgur.com/45IxCbL.png"  class="img-responsive img-circle center-block" style=""></div>
    </div>
    <div class="col-xs-3">
      <div style="background-color: orange;">444<br /><img src="http://i.imgur.com/45IxCbL.png"  class="img-responsive img-circle center-block" style=""></div>
    </div>
  </div>
</div>

这个工作正常，但我想在第一个（111 - 填充/边距 - 左）和最后一个元素（444 - 填充/边距 - 右）添加填充或边距。所以我只添加了儿童的边距：

https://jsfiddle.net/t814cmts/11/

但现在第一个和最后一个元素小于第二个和第三个元素。

如何在不使用px的情况下，仅为第一个和最后一个元素创建边距/填充的最佳方法？

Answer 1

将style="margin-left: 15px; margin-right: 15px"添加到div.row。

此处JSFiddle

或者您可以将col-xs-3 div包装到另一个div并设置为样式。

Answer 2

我会将填充添加到行而不是列

.container div.row {
  padding: 0 15px;
}
.container div.col-xs-3 {
  padding: 0;
}

https://jsfiddle.net/s3j3mywz/2/

删除列之间的填充

2 个答案: