css - 如何在bootstrap中删除col类的margin-left和margin-right？

Question

我是 Bootstrap 新手。我并排放置了 3 张图像，但它们并不相邻。他们之间有一个边距。 This is picture

我想消除边距，使图像相邻。中心图像尺寸为 1200x400，左右图像尺寸均为 600x400。我还使用了 img-responsive 类。实际问题是什么？ 这是代码

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />
        </div>
        <div class="col-sm-6">
            <asp:Image CssClass="img-responsive" ImageUrl="images/center1.jpg" runat="server" />
        </div>
        <div class="col-sm-3">
            <asp:Image CssClass="img-responsive" ImageUrl="images/right.jpeg" runat="server" />    
        </div>
    </div>
</div>

您还注意到图片中的这些图片没有正确垂直对齐，如何修复它。

谢谢!

Answer 1

通过 Bootstrap v4，您可以使用:

<div class="row no-gutters"></div> 

这会将 margin-left 和 margin-right 设置为 0

引导类:

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}