我正在做一个网站,我首先从移动样式表开始.
但容器流体的宽度与窗口的宽度不同.
但容器流体的宽度与窗口的宽度不同.
.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;
}
解决方法
Bootstrap容器是填充的.
.container-fluid {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
您需要删除填充.
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
编辑：这是一个简单的例子.如果您将其复制并粘贴到新的.html文档中,您将看到容器上没有填充.如果你然后删除容器 – 流体覆盖,你会看到填充.
<!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>
编辑HTML示例以包含新的CSS链接
