在这个单页网站中，我的约会和联系人没有采取我需要的全宽和高度。更多欢迎提出更多建议。当关于服务和联系页面来时缩小顶部导航栏。
/*!
* Start Bootstrap - Scrolling Nav (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.about {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.services{
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}
.contact {
height: 100%;
width:100%;
padding-top: 150px;
padding-left: 100px;
text-align: center;
background-color:#000026;
color:white;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>ITspectra</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/carousel-3d.js" ></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link href="css/scrolling-nav.css" rel="stylesheet">
<style>
#wrapper {
width: 100%;
height:100%;
background-color: tan;
float:left;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color:black;
width:100%;
height:110px;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
ul.nav.navbar-nav {
margin-left: 36%;
margin-top: 22px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
@media (max-width: 600px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
<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="index.php"><img src="its.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="service.php">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<div id="wrapper">
<div data-carousel-3d >
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d//images/left.png" data-carousel-3d-left />
<img src="http://www.jqueryscript.net/demo/Responsive-3D-Rotating-Carousel-Plugin-For-jQuery-carousel-3d/images/right.png" data-carousel-3d-right />
<ul data-carousel-3d-children>
<li><img src="https://unsplash.it/640/420?image=628" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=633" /></li>
<li><img src="https://unsplash.it/640/420?image=635" /></li>
<li><img src="https://unsplash.it/640/420?image=626" /></li>
<li selected><img src="https://unsplash.it/640/420?image=629" /></li>
</ul>
</div>
</div>
<div class="container-fluid text-center">
<h3>Welcome to IT Spectra</h3><br>
<p id="ccont">IT Spectra excels in providing custom software and
mobile apps that match your specications, which is
just one of its many advantages: Extensive Team of experienced
professionals. 15+ years of IT experience.
Unique Ideas Expand skilled resources. Well within
budget and time constraints. Gain competitive advantage
in the market..</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="about">
<h2>About Us</h2>
<p id="fcont">IT Spectra excels in providing
custom software and mobile apps
that match your specifications,
which is just one of its many
advantages</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="services">
<h2>Company</h2>
<p id="fcont">Company Overview
Meet The Team
Our Awesome Partners
Our Services</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="contact">
<h2>Address</h2>
<p>IT SPECTRA<br/>
Flat-1A,1st Floor,<br/>
Plot No.38,James Street,<br/>
Ram Nagar-North,<br/>
Madippakkam,Chennai-91.</br>
Phone : 044 - 4957 7990<br/>
E-mail : info@itspectra.com<br/>
Web : www.itspectra</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您是否尝试降低导航栏的高度？
如果是，那么您可以使用以下css覆盖：
.navbar {
height: auto !important;
}