问题
I am new to bootstrap. I put 3 images side by side but they are not adjacent. There is a margin between them. This is picture
I want to eliminate the margins so that the images are adjacent. The center image size is 1200x400 and both left and right images size is 600x400. And also I've used img-responsive class. what is the actual problem?
Here is the code
<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>
Also you notice in picture, these pictures are not vertically aligned properly how to fix it.
Thanks!
回答1:
As Yorki Bonilla said you can do something like this:
<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>
And add a class in your CSS
.no-padding {
padding: 0px;
}
But at the same time you have to remember to remove the left and right margin to the row that contains your columns by doing:
.no-marginLR {
margin-left:0;
margin-right:0;
}
Note that I've added the .no-marginLR class to the row
回答2:
<row class='no-gutters'>...</row>
I realize you've tagged your question with version 3, however, Bootstrap 4 includes a class of no-gutters for grids. Eliminates the padding from the columns that you're seeing. that you're seeing (as well as the negative margin on the row).
https://v4-alpha.getbootstrap.com/layout/grid/#no-gutters
As an example, 1 container with a standard row. And the same container with a row with the no-gutters class.
It's worth mentioning that when you're working within a framework (Bootstrap, Foundation, etc.) and you have a need for something simple like this, check the documentation. Most likely it's been thought of and built in. Oh and run from anyone telling you to put !important rules in your CSS.
<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>回答3:
this is css code
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;
}
回答4:
I misunderstood your question, here is the correct answer:
If you want the images to look like this:
Corrected images next to each other
instead of like this:
old images using your code for example
You need to delete the padding from the Col-sm that bootstrap has.
how?
Is not a good practice to delete the padding from the entire col-sm class.. so i would rather create a class for this particular case named (I dont know) "no-padding". and do this:
<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>
And now in your CSS:
no-padding {
padding: 0px;
}
That should fix the images from having spaces between them.
回答5:
In your css class add margin: 0 !important;
this will remove all margins.
If you want to remove just left and right margins and keep top and bottom you need to specify margin-left: 0 !important; margin-right: !important;
回答6:
With Bootstrap v4 you can use:
<div class="row no-gutters"></div>
this will set margin-left and margin-right to 0
Bootstrap class:
.no-gutters {
margin-right: 0;
margin-left: 0;
}
来源：https://stackoverflow.com/questions/47328990/how-to-remove-margin-left-and-margin-right-of-col-class-in-bootstrap