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

Answer 2

在你的css课程中添加margin: 0 !important; 这将删除所有边距。如果您只想删除左右边距并保持顶部和底部，则需要指定margin-left: 0 !important; margin-right: !important;

Answer 3

这是css代码

body {
    background-color: #D8BFD8;
}

.navbar-default {
  background-color: #4c1f36;
  border-color: #63304a;
}
.navbar-default .navbar-brand {
  color: #eeeeee;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #dddddd;
}
.navbar-default .navbar-text {
  color: #eeeeee;
}
.navbar-default .navbar-nav > li > a {
  color: #eeeeee;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #4c1f36;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #eeeeee;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
  background-color: #63304a;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #dddddd;
  background-color: #63304a;
}
.navbar-default .navbar-toggle {
  border-color: #63304a;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #63304a;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #eeeeee;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #eeeeee;
}
.navbar-default .navbar-link {
  color: #eeeeee;
}
.navbar-default .navbar-link:hover {
  color: #dddddd;
}

@media (max-width: 768px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #eeeeee;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #dddddd;
    background-color: #63304a;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #dddddd;
    background-color: #63304a;
  }
}

@media (min-width: 768px) {

    .horizontal-menu {
        width: 700px;
        float: left;
        opacity: 0.95;    
    }

    .left {
        float: left;
        padding: 10px;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
    }
}

.row-with-full-width {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Answer 4

我误解了你的问题，这是正确答案：

如果您希望图像看起来像这样：

Corrected images next to each other

而不是像这样：

old images using your code for example

您需要从引导程序包含的Col-sm中删除填充。

如何？

从整个col-sm类中删除填充不是一个好习惯..所以我宁愿为这个名为（我不知道）“no-padding”的特殊情况创建一个类。并这样做：

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

现在在你的CSS中：

no-padding {
padding: 0px;
}

这应该可以修复图像之间的空格。

Answer 5

<row class='no-gutters'>...</row>

我意识到你已经用版本3标记了你的问题，但是，Bootstrap 4包含了一个用于网格的no-gutters类。消除您所看到的列的填充。你正在看到的（以及行上的负边距）。

https://v4-alpha.getbootstrap.com/layout/grid/#no-gutters

例如，1个带有标准行的容器。和同一个容器有一个没有排水沟类的行。

值得一提的是，当您在框架（Bootstrap，Foundation等）中工作并且您需要这样简单的东西时，请查看文档。最有可能的是它已被考虑并内置。哦，并且任何人告诉你在你的CSS中加入!important规则。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-sm-3">
           <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
    </div>
</div>

<div class="container">
    <div class="row no-gutters">
        <div class="col-sm-3">
           <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
        <div class="col-sm-3">
            <img src="//fillmurray.com/300/300" class="img-fluid"/>
        </div>
    </div>
</div>

Answer 6

正如Yorki Bonilla所说，你可以这样做：

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

在CSS中添加一个类

.no-padding {
    padding: 0px;
}

但与此同时，您必须记住通过执行以下操作将左边距和右边距移除到包含列的行：

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

请注意，我已将.no-marginLR类添加到行

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

6 个答案: