0
我從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>
我已更新帖子，謝謝！ –
我認爲在secound圖像中標題2（「h2」）的本地填充是原因。 – weiky
這是否解決了您的問題？ – weiky