Question

使用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;
}

Answer 1

<input ng-model="amount" ng-attr-payment="{{payment}}">

<p>{{payment}}<p>

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

Answer 2

要达到预期效果，请使用以下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

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

Answer 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中指定新类来区分。

图像之间的间距不同

3 个答案: