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

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

这是你想要实现的目标吗？

.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 3

我使用了最后一个子选择器。 “Bla”是我添加到有问题的div中的一个类

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

}

有一些高度问题，但使用display: flex;来解决这个问题。

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

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

Answer 4

<强>尝试：

remove

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

add

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

Answer 5

如果删除了正确的填充，它将具有您正在寻找的结果。

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>
..

添加一个删除padding-right的额外css类。

Answer 6

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

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

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

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

6 个答案: