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

Question

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

现在看起来像这样:

我想要这个，只是在 div 和相等的 img 高度之间有相等的填充/空间:

代码:

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