twitter-bootstrap Bootstrap 4 行延伸到容器外
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47559916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 row extends outside of container
提问by Matt
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.
我正在为我的老板开发一个简单的网站。我决定尝试使用引导程序并选择了版本 4。所以我有一个非常好的模板结构，并注意到主要内容的行延伸到容器 div 的边界之外。它是页面上唯一执行此操作的行。我尝试在任一/两个元素上使用边距或填充更改间距，但似乎没有任何改变。我还尝试将主要内容包含在节标记中，因为其他两行包含在页眉/页脚标记中并且它们保留在边界内。这也不起作用。我可能在这里遗漏了一些明显的东西。感谢您的帮助，我很感激。
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-vFJXuSJphRtheitroadBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" 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.
编辑：添加styles.css 文件。
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;
}
}
回答by Brock Reed
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.
bootstrap 中的 .row 给出了 -15px 的左右边距，用内联 style="margin: auto" 覆盖它，你应该没问题。
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.
旁边的左右边距默认为 15，因此在您的情况下，您应该将 padding-left 设置为 0，以使内容正确地适合网格。
<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-->
回答by ohryan
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.
将 'no-gutters' 类添加class='row no-gutters'到 bootstrap 4 行也是摆脱边距和填充的好方法。
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.
可以使用 .no-gutters 删除预定义网格类中列之间的间距。这将从 .row 中删除负边距，并从所有直接子列中删除水平填充。
回答by Olivier Van de Velde
use the class mr-0instead of style="margin-right: 0"that's the bootstrap 4 way.
使用类mr-0而不是style="margin-right: 0"引导程序 4 的方式。
