额外的保证金/填充
我从Bootstrap获得了这个模板，但我意识到侧面有额外的填充/边距。我无法弄清楚我的css中哪个部分出了问题。
在第二页，我想摆脱侧面的白色空间，我需要它全是蓝色。
.site-wrapper {
display: table;
width: 100%;
height: auto; /* For at least Firefox */
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: middle;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Pacific American School | 亞太美國學校</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My CSS -->
<link href="style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" type="image/ico" href="photos/Favicon PAS.png" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:200,400,700,800,900" rel="stylesheet">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="site-wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Pacific American School</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li class="active"><a href="#">Academics</a></li>
<li><a href="#">Exclusive</a></li>
<li><a href="#">Student Life</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="cover-container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol> <!-- CAROUSEL-INDICATORS -->
<div class="content-container" id="updates">
<h1>K-12 OPEN HOUSE 2017</h1>
<div class="container-fluid">
<h2>Date: 4/8, 4/22, 5/6, 6/22</h2>
<h2>Time: 2pm - 4pm</h2>
<button type="button" class="btn btn-default"><a href="https://docs.google.com/forms/d/e/1FAIpQLScHMIAZuriC8_MSdsmJfY772KS3LEdgh2PYCwit1hZ3LZclGg/viewform?c=0&w=1" target="_blank">Attend!</a></button>
</div> <!-- CONTAINER-FLUID -->
</div> <!-- OPEN-HOUSE-INFO -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url(photos/JO2_2978.JPG);">
</div>
<div class="item" style="background-image: url(photos/DSC02620.JPG);"></div>
<div class="item" style="background-image: url(photos/JO2_2960.JPG);"></div>
<div class="item" style="background-image: url(photos/17GradTripBali-272.jpg);"></div>
</div> <!-- CAROUSEL-INNER -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- CAROUSEL SLIDE -->
</div> <!-- COVER-CONTAINER -->
<div class="container-fluid">
<div class="row" id="home-info">
<div class="col-md-3" id="navy1">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<a><i class="fa fa-newspaper-o fa-3x" aria-hidden="true"></i></a>
<p>Learn more about our recent events and news!</p>
</div>
</div>
</div>
<div class="col-md-3" id="navy2">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<a href="hhttps://drive.google.com/file/d/0B1LpcXUSvbG1VjA3ck1pWVRjSTg/view" target="_blank"><i class="fa fa-calendar fa-3x" aria-hidden="true"></i></a>
<p>Stay up to date! Get the school's calendar here!</p>
</div>
</div>
</div>
<div class="col-md-3" id="navy1">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<a href="https://www.facebook.com/pacificamerican.org/" target="_blank"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a>
<p>Like and connect with us via Facebook!</p>
</div>
</div>
</div>
<div class="col-md-3" id="navy2">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<a href="https://www.youtube.com/user/PacificAmericanMedia" target="_blank"><i class="fa fa-youtube fa-3x" aria-hidden="true"></i></a>
<p>Learn more about us through our videos!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
对于第二张图片
.site-wrapper {
display: table;
width: 100%;
height: auto; /* For at least Firefox */
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: middle;
}
#academics {
background-image: url(photos/Copy%20of%20IMG_0351.png);
background-position: center center;
background-size: cover;
height: 40vh;
}
.academics p {
color: #fff;
text-align: justify;
padding: 30px;
}
.academic-nav {
background-color: #fff;
height: 400px;
display: none;
}
ul > li > a {
color: #000;
}
ul {
text-align: left
}
.col-md-10 {
overflow: scroll;
height: 60vh;
}
.col-md-6 {
width: 100%;
}
#kindergarten,
#socialstudies {
background-color: #4285f4;
}
#elementary,
#art {
background-color: #0f9d58;
}
#english,
#pe {
background-color: #f4b400;
}
#math-science {
background-color: #db4437;
}
iframe {
height: 200px;
border: 5px solid white;
margin: 40px;
}
#academic-des {
position: relative;
overflow-y: scroll;
}
@media (min-width: 768px) {
.academic-nav {
position: absolute;
display: block;
background-color: #fff;
height: 60vh;
z-index: 10;
}
.col-md-10 {
float: right;
}
}<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Pacific American School | 亞太美國學校</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My CSS -->
<link href="style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" type="image/ico" href="photos/Favicon PAS.png" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:200,400,700,800,900" rel="stylesheet">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="site-wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Pacific American School</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li class="active"><a href="#">Academics</a></li>
<li><a href="#">Exclusive</a></li>
<li><a href="#">Student Life</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="site-wrapper" id="academics">
<div class="site-wrapper black-cover">
<div class="site-wrapper-inner">
<h1>Academics</h1>
</div>
</div>
</div> <!-- academics -->
<div class="site-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 academic-nav">
<ul class="nav nav-pills nav-stacked">
<li><a href="#kindergarten">Kindergarten</a></li>
<li><a href="#elementary">Elementary</a></li>
<li><a href="#english">English</a></li>
<li><a href="#math-science">Math & Science</a></li>
<li><a href="#socialstudies">Social Studies</a></li>
<li><a href="#art">Art & Design</a></li>
<li><a href="#pe">Physical Education</a></li>
</ul>
</div> <!-- col-md-2 -->
<div class="col-md-10" id="academic-des" data-spy="scroll" data-target="academic-nav">
<div class="site-wrapper academics" id="kindergarten">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Kindergarten (3yrs - 5yrs)</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen id="videos"></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- kindergarten -->
<div class="site-wrapper academics" id="elementary">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Elementary Department (Grade 1-5)</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen id="videos"></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- elementary -->
<div class="site-wrapper academics" id="english">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>English Department</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen id="videos"></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- english -->
<div class="site-wrapper academics" id="math-science">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Math & Science Department</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen id="videos"></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- math & science -->
<div class="site-wrapper academics" id="socialstudies">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Social Studies</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- socialstudies -->
<div class="site-wrapper academics" id="art">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Art & Design</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- art -->
<div class="site-wrapper academics" id="pe">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Physical Education</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- pe -->
</div> <!-- col-md-10 -->
</div> <!-- row -->
</div> <!-- container-fluid -->
</div> <!-- site-wrapper -->
</div> <!-- mastfoot -->
</div> <!-- site-wrapper -->
</body>
</html>
1 个答案:
答案 0 :(得分：0)
我认为在第一张图片中，侧面的填充来自链接的原生填充（＆＃34; a＆＃34;）或html中的段落（＆＃34; p＆＃34;）可能两者。
我需要secound的来源来回答你的问题。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？