极客观点
项目管理
HarmonyOS
我正在做一个网站，我首先从移动样式表开始。但是容器流体的宽度与窗口的宽度不同。
我试图解决这个问题的是：
.container-fluid{
width: 105%
}
现在的问题是，当我把窗口变小一点时，仍然不够，但是当我把窗口变大一点时，它就太大了，当我这样做时，底部会出现一个滚动条。
100% 不起作用，因为我已经说过它不是窗口的整个宽度。
这是 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>
这是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;
}
原文由 Blaze26 发布，翻译遵循 CC BY-SA 4.0 许可协议
引导容器被填充。
您需要删除填充。
编辑：这是一个简单的例子。如果您将其复制并粘贴到一个新的 .html 文档中，您将在容器上看到没有填充。如果您随后删除
container-fluid覆盖，您将看到填充。编辑 HTML 示例以包含新的 css 链接
编辑：引导程序 4
@Dagrooms 评论说：“在 Bootstrap 4 中执行此操作的最佳方法是将
px-0添加到您的container-fluiddiv 中。”这将从容器的左侧和右侧移除填充，使其接触浏览器视口的两侧。