问题
I am working on a simple website for my boss. I decided to try using bootstrap and opted for version 4. So I have a pretty good template structured out and noticed that the row for the main content extends out past the bounds of the container div. It is the only row on the page which does that. I tried changing spacing with margin or padding on either/both elements and it didn't seem to change anything. I also tried containing the main content inside of a section tag, since the other two rows are contained within header/footer tags and they remain within the bounds. This also did not work. I am probably missing something obvious here. Thank you for any help, I appreciate it.
screenshot
I highlighted the container just to show it's bounding box. I also have the padding removed from it in this screenshot, it is the same problem either way though.
<!doctype html>
<html lang="en">
<head>
<title>Air Technology West</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- fontawesome CDN embed -->
<script src="https://use.fontawesome.com/f13a1bd68c.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- Header area -->
<header class="pt-3 px-3">
<div class="row">
<div class="col-md-6">
<a href="#"><img class="logo" src="img/logo1.png"></a>
</div>
<div class="col-md-6">
<ul class="contact-info">
<li class="ph-local"><i class="fa fa-phone fa-fw"></i> xxx-xxx-xxxx</li>
<li class="ph-fax"><span class="fnt-sm">Fax: </span><i class="fa fa-fax fa-fw"></i> xxx-xxx-xxxx</li>
</ul>
</div>
</div><!--END ROW-->
</header>
<nav class="navbar navbar-expand-md nav-main d-flex flex-row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-main-toggle" aria-controls="nav-main-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x"></span><span class="btn-collapse"> MENU</span>
</button>
<div class="collapse navbar-collapse" id="nav-main-toggle">
<div class="nav navbar-nav mr-auto">
<p class="nav-item"><a class="nav-link px-3" href="#">Home</a></p>
<p class="nav-item"><a class="nav-link px-3" href="#">About Us</a></p>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Compressors</a>
<a class="dropdown-item" href="#">Spray Equipment</a>
<a class="dropdown-item" href="#">Parts & Accessories</a>
<a class="dropdown-item" href="#">All Major Products</a>
</div>
</li>
<p class="nav-item"><a class="nav-link px-3" href="#">Services</a></p>
<p class="nav-item"><a class="nav-link px-3" href="#">Contact Us</a></p>
</div>
</div>
</nav>
<!--===========END header area==============-->
<!--===========CAROUSEL area================-->
<div id="carousel-main" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-main" data-slide-to="0" class="active"></li>
<li data-target="#carousel-main" data-slide-to="1"></li>
<li data-target="#carousel-main" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="#"><img class="d-block w-100" src="img/headline_compressors.PNG" alt="First slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="img/headline_spray.PNG" alt="Second slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="http://via.placeholder.com/720x300" alt="Third slide"></a>
</div>
</div><!--END CAROUSEL INNER-->
<a class="carousel-control-prev" href="#carousel-main" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-main" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--===========END carousel area============-->
<!--===========PAGE content==============-->
<section id="page-content">
<div class="row">
<aside class="col-md-3">
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Service</p>
</div>
</a>
</div>
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Products</p>
</div>
</a>
</div>
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Parts & accessories</p>
</div>
</a>
</div>
</aside>
<article class="main col-md-9 col-sm-12 px-3 mt-3">
<p>This is the main content area</p>
</article>
</div><!--END ROW-->
</section><!--END PAGE CONTENT-->
<!--============END page content===============-->
<!--=============footer area===============-->
<footer class=" my-3 px-3">
<div class="row">
<div class="col-sm-6">
<h3 class="border-bottom">Quick links</h3>
<nav class="nav row nav-footer">
<a class="nav-link col-md-4 col-sm-6" href="#">Products</a>
<a class="nav-link col-md-4 col-sm-6" href="#">Services</a>
<a class="nav-link col-md-4 col-sm-6" href="#">About Us</a>
<a class="nav-link col-md-4 col-sm-6" href="#">Contact Info</a>
<a class="nav-link col-md-4 col-sm-6" href="#">Directons</a>
<a class="nav-link col-md-4 col-sm-6" href="#">Site Map</a>
</nav>
</div>
<div class="col-sm-6 contact-info">
<h3 class="border-bottom">Contact Info</h3>
<p class="ph-local"><i class="fa fa-phone fa-fw"></i> xxx-xxx-xxxx</p>
<p class="ph-fax"><span class="fnt-sm">Fax: </span><i class="fa fa-fax fa-fw"></i> xxx-xxx-xxxx</p>
<p class="address"><i class="fa fa-map-marker fa-fw"></i> ADDRESS</p>
</div>
</div><!--END ROW-->
</footer>
<!--==============END footer area================-->
</div><!--===============END CONTAINER===============-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
Edit: add styles.css file.
html{
font-family: verdana, helvetica, sans-serif !important;
}
nav a{
color: black;
list-style: none;
text-align: center;
text-transform: uppercase;
}
.nav .nav-link, .nav .dropdown-item {
color: black;
}
.dropdown-toggle{
color: black;
}
.nav a:hover{
border-bottom: 3px solid black;
margin-bottom: -3px;
}
.nav a:active{
background-color: grey;
color: white;
}
.navbar{
padding: .1rem;
}
.navbar-toggler{
margin-left:auto;
margin-right: auto;
}
/*********************3. LAYOUT********************/
#carousel-main{
position:relative;
}
.carousel-button-right{
position: absolute;
bottom: 2rem;
right: 25%;
}
.carousel-button-left{
position: absolute;
bottom: 2rem;
left: 25%;
}
.carousel-button-center{
position: absolute;
bottom: 30px;
right: 50%;
}
/*********************4. MODULES*******************/
/********4.1 HEADER *********/
.logo{
height: auto;
max-width: 100%;
}
.contact-info{
list-style: none;
text-align: right;
}
.fnt-sm{
font-size: .75rem;
}
.ph-local{
font-size: 1.75rem;
}
/********4.2 MAIN NAV********/
.btn-collapse{
font-size: 2.2rem;
font-weight: bold;
}
/********FOOTER********/
.border-bottom{
border-bottom: 1px solid black;
}
/*********************5. STATES********************/
/*********************6. THEME*********************/
body{
background-image: url("../img/escheresque_ste.png");
background-repeat: repeat;
}
header, footer, .navbar, .main{
background-color: white;
}
@media (max-width: 767px) {
header *{
text-align:center;
}
nav .nav-item{
text-align: center;
}
aside{
display: none;
}
}
@media (max-width: 575px) {
footer *{
text-align: center;
}
footer nav .nav-item{
text-align: center;
}
}
@media (min-width: 576px) {
footer.contact-info *{
text-align: right;
}
}
回答1:
The .row in bootstrap is giving a margin right and left of -15px, override it with a in-line style="margin: auto" and you should be fine.
The aside has a default padding left and right of 15, so in your case you should set the padding-left to 0 making the content fit the grid properly.
<section id="page-content">
<div class="row" style="margin: auto">
<aside class="col-md-3" style="padding-left: 0">
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Service</p>
</div>
</a>
</div>
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Products</p>
</div>
</a>
</div>
<div class="card mt-3">
<a href="#">
<img class="card-img-top" src="http://via.placeholder.com/200x200" alt="Card image cap">
<div class="card-body">
<p class="card-text">Parts & accessories</p>
</div>
</a>
</div>
</aside>
<article class="main col-md-9 col-sm-12 px-3 mt-3">
<p>This is the main content area</p>
</article>
</div><!--END ROW-->
</section><!--END PAGE CONTENT-->
回答2:
Adding the 'no-gutters' class class='row no-gutters' to your bootstrap 4 rows is also a nice way to get rid of margins and paddings.
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
https://getbootstrap.com/docs/4.1/layout/grid/#no-gutters
回答3:
use the class mr-0 instead of style="margin-right: 0" that's the bootstrap 4 way.
回答4:
Considering above answers, sometimes you need to edit default CSS property in your project.
so if your want to Apply no-gutters or any CSS property, you can simply change that property on main CSS / SASS file like this:
.row {
margin: 0;
}
this hack will remove no-gutters margin from all row in your project!
来源：https://stackoverflow.com/questions/47559916/bootstrap-4-row-extends-outside-of-container