图像之间的不同间距答案

【问题标题】：Different spacing between images图像之间的不同间距
【发布时间】：2017-08-05 20:03:21
【问题描述】：

使用 Bootstrap，我试图在屏幕的左侧和右侧获得更大的边距空间，并在图像之间获得较薄的空间。尝试单独定位图像并使用边距，但这会改变图像大小，并且由于不同的图像具有不同的边距大小，因此图像不均匀。

尝试将所有图像定位为具有相同的边距，但差距太大，这不是我想要的，有没有办法解决这个问题？添加图像以显示我想要什么以及我目前拥有什么。我的代码如下：

预期结果（左右边距较大，图像之间的边距较薄）

当前结果（左右没有边距，图像之间的边距很大）

HTML

    <div class="row">
        <div class="row" class="top-img-custom">
            <div class="text-center col-md-4">
                <img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
            </div>
            <div class="text-center col-md-4">
                <img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
            </div>
            <div class="text-center col-md-4">
                <img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
            </div>
        </div>
    </div>

CSS

.top-img-custom{
    margin-left: 20px;
    margin-right: 20px;
}

【问题讨论】：

这是内置风格的引导程序。 .text-center { 文本对齐：居中； }
请在一个类中使用两个类 -
看看区别
codepen.io/nagasai/pen/wqgMpj
@NagaSaiA 谢谢，解决了左右边距问题，但图像之间的边距仍然太大。
发布了我的答案以解决其他问题。希望对您有所帮助:)

标签： html css twitter-bootstrap

【解决方案1】：

要达到预期的效果，请使用下面的 CSS

.top-img-custom{
    margin-left: 20px;
    margin-right: 20px;
    padding-left:20px;
    padding-right:20px;
}

.text-center {
    text-align: center!important;
    padding: 1px;
}

img{
  width:100%;
}

https://codepen.io/nagasai/pen/dzNGqv

正如我之前提到的，在一个类中使用两个类-

【讨论】：

【解决方案2】：

body{
background-color: #f2f2f2!important;
}
.top-img-custom{
    margin:10px 25px!important;
}
.top-img-custom .text-center{
    padding: 0 1px!important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

   <div class="row">
        <div class="row top-img-custom" >
            <div class="text-center col-md-4 col-sm-4 col-xs-4">
                <img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
            </div>
            <div class="text-center col-md-4 col-sm-4 col-xs-4">
                <img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
            </div>
            <div class="text-center col-md-4 col-sm-4 col-xs-4">
                <img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
            </div>
        </div>
    </div>

【讨论】：

【解决方案3】：

这种行为对于引导网格系统来说并不容易——它几乎是为每个 col- 类中的 15px 填充而设计的，并且包含 row 类的负边距以补偿边缘.搞砸这些，很容易得到一些意外的元素环绕或水平滚动条。

我的方法可能是让row 和col- 类自行调整大小，但给col- 类的内容一个负边距以填充更多空间。如果您不想在边缘元素上使用它，您将不得不很棘手。

这个 css 应该可以工作：

.top-image-custom .img-responsive {
    margin-left: -12px;
    margin-right: -12px;
}

如果您不想在边缘元素上这样做，那么使用一些 :first-of-type 和 :last-of-type 选择器可能会有所帮助，或者在您的 html 中分配新的类来区分。

【讨论】：