如何使用 Bootstrap 使行中的填充相等？

Question

我想在 .slideshow div 下为所有 div 创建相等的填充。问题是最后 div 右填充。

现在看起来像这样：

我想要这个，只是在 divs 和相等的 img 高度之间有相等的填充/space：

代码：

HTML:

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="product-container">
                <div class="slideshow">
                    <p>Test message, Test message</p>
                </div>

                <div class="col-sm-3 col-md-3 col-lg-3">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.product-container{
    padding: 0px 9%;
}
.slideshow{
    background-color: #efeff1;
  border: 1px solid #c5c5c7;
  overflow: hidden;
}
.product-container img{
    width:100%;
}
.col-lg-3{
    padding-right:12px;
    padding-left:0px;
}

Fiddle: Fiddle

Answer 1

只需将所有包含 div 的图像包裹在额外的 .row:

中

<div class="row">
    <div class="col-sm-3 col-md-3 col-lg-3">
        <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">
        <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">
        <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
    </div>
    <div class="col-sm-3 col-md-3 col-lg-3">
        <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
    </div>
</div>

并删除不必要的样式：

.col-lg-3{
    padding-right:12px;
    padding-left:0px;
}

此外，您不需要对所有设备重复响应类：

<div class="col-sm-3 col-md-3 col-lg-3"></div>

可以写成：

<div class="col-sm-3"></div>

Updated fiddle

Answer 2

尝试：

remove

.col-lg-3{
 padding-left:12px;
 padding-right:0px;
}

add

.product-container .col-lg-3
{
padding-left:0px;
padding-right:0px;
}

Answer 3

如果删除右边的填充，它将得到您要查找的结果。

http://jsfiddle.net/0rm0h547/light/

http://jsfiddle.net/0rm0h547/show/

css

.continuous {
    padding-right: 0px;
}

html

..
<div class="col-sm-3 col-md-3 col-lg-3 continuous">
                    <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">                    
                </div>
..

添加一个额外的 css class 以删除 padding-right.

Answer 4

这是您要实现的目标吗？

.product-container {
    padding: 0 2px 6px 2px;
    overflow: hidden;
}
.slideshow {
    background-color: #efeff1;
    border: 1px solid #c5c5c7;
    padding-left: 20px;
}
.product-container img {
    width: 100%;
}
.product-container .pads {
    padding: 0px 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="col-lg-12">
    <div class="product-container">
      <div class="row">
        <div class="slideshow">
          <p>Test message, Test message</p>
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3 pads">
          <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3 pads">
          <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3 pads">
          <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
        </div>
        <div class="col-sm-3 col-md-3 col-lg-3 pads">
          <img src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy-4.png" alt="s">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 5

我使用了 last-child 选择器。 "Bla" 是一个 class 我添加到有问题的 div

.bla:last-child{
   padding-right:0px ;

}

身高有一些问题，但用 display: flex; 解决了。

这在旧版浏览器中效果不佳

http://jsfiddle.net/52VtD/12065/

Answer 6

你可以给padding-right:0px;你会得到你想要的。

http://jsfiddle.net/52VtD/12070/

.col-lg-3{
    padding-right:0px;
    padding-left:0px;
}

如何使用 Bootstrap 使行中的填充相等？

How to make equal padding in row with Bootstrap?

html

css

twitter-bootstrap

padding