CSS Bootstrap 容器流体不是屏幕的整个宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39181658/
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 container-fluid isn't the whole width of the screen
提问by Blaze26
I'm doing a site and I'm starting with the mobile stylesheet first. But the container-fluid's width isn't the same as the window's width.
我正在做一个网站，我首先从移动样式表开始。但是容器流体的宽度与窗口的宽度不同。
What I tried to do to fix this was:
我试图做的是解决这个问题：
.container-fluid{
width: 105%
}
The problem now is that when I make the window a little smaller, it's still not enough, but when I make the window a little bit bigger, it's TOO MUCH, when I do that a scroll bar appears at the bottom.
现在的问题是，当我将窗口缩小一点时，它仍然不够，但是当我将窗口扩大一点时，它太多了，当我这样做时，底部会出现一个滚动条。
100% doesn't work since I already said that it's not the full width of the window.
100% 不起作用，因为我已经说过它不是窗口的全宽。
Here's the entire body from the HTML file:
这是 HTML 文件的整个正文：
<body>
<!-- Introduction -->
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<!-- //Introduction// -->
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
</body>
and this is the CSS file:
这是 CSS 文件：
/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */
/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}
回答by timgavin
Bootstrap containers are padded.
Bootstrap 容器被填充。
.container-fluid {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
You need to remove the padding.
您需要删除填充。
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
Edit: This is a bare bones example. If you copy this and paste into a new .html document you'll see no padding on the container. If you then remove the container-fluidoverride you'll see padding.
编辑：这是一个简单的例子。如果您将其复制并粘贴到新的 .html 文档中，您将不会在容器上看到填充。如果然后删除container-fluid覆盖，您将看到填充。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- put your override styles here - AFTER you include Bootstrap -->
<link href="style-mobile.css" rel="stylesheet">
</head>
<style>
/* override Bootstrap's container */
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
</style>
<body>
<div class="container-fluid">
This text hits the left side of the viewport.
</div>
</body>
</html>
Edited HTML example to include new css link
编辑 HTML 示例以包含新的 css 链接
回答by Md. Parvez
Try this, wrap all the content inside container-fluidwith a bootstrap rowclass. It should work, thanks.
试试这个，container-fluid用一个引导row类将所有内容包装在里面。应该可以，谢谢。
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
回答by steve
If you just change .container-fluid that won't work because the row and col inside the container all get their own corrections. Try adding full-width to your container-fluid and then adding this:
如果您只是更改 .container-fluid 将不起作用，因为容器内的 row 和 col 都有自己的更正。尝试将全角添加到您的容器流体中，然后添加以下内容：
.full-width { padding-left: 0; padding-right: 0; }
.full-width .row { margin-right: 0; margin-left: 0; }
.full-width .col-md-12 { padding-left: 0; padding-right: 0; }回答by Miguel de Matos
With Bootstrap 4:
使用 Bootstrap 4：
<div class="container-fluid p-0">
<div class="row m-auto">
your content here
</div>
</div>
回答by Invest
After a long time of searching and trying out what did it for me in the end was a "w-100" in the "col-xs-12" div tag.
经过长时间的搜索和尝试，最终对我有用的是“col-xs-12”div标签中的“w-100”。
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 w-100">
My content that did not span 100% now with w-100 it does
</div>
</div>
</div>
回答by Sam G
<div className="container-fluid p-0 m-0 row justify-content-center" >
<div className="container-fluid p-0 m-0 row justify-content-center" >
If you use bootstrap, you can use p-0and m-0and they will set the 15px padding from .container-fluidand -15px margin from .rowto 0.
如果你使用 bootstrap，你可以使用p-0andm-0他们会将 15px 的 padding from.container-fluid和 -15px margin from 设置.row为 0。
回答by Dan
I guess there are many ways to do this. in Bootstrap 4, all you have to do is wrap the Container in a Div with Class=Row
我想有很多方法可以做到这一点。在 Bootstrap 4 中，你所要做的就是用 Class=Row 将容器包装在一个 Div 中
<div class="Row">
<header class="container-fluid">
<nav class="navbar navbar-dark bg-secondary">
<h1 class="navbar-brand">Try this out</h1>
</nav>
<header>
</div>
回答by Lachlan Danvers
If none of this works try:
如果这些都不起作用，请尝试：
*{margin:0;padding:0}
to remove the padding/margin that might be overlapping on your code. It worked for me, since adding a row wrapping the container-fluid created a horizontal scroll on my page.
删除可能与您的代码重叠的填充/边距。它对我有用，因为添加一行包装容器流体会在我的页面上创建一个水平滚动。
