为什么网站的右下角有额外的空间？

时间：2017-03-16 15:16:58

标签： html css twitter-bootstrap

我正在尝试删除网站底部和右侧的空白区域。在右侧，它似乎是由黑色导航栏引起的，但我不知道如何解决它。 

/* Navbar */

.navbar-default {
  background-color: transparent;
  border-color: transparent;
}

.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a {
  color: #fff;
}

.navbar-default .navbar-toggle {
  border-color: #000;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: #fff;
}

.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle {
  background-color: transparent;
}

.navbar-fixed-top.scrolled {
  background: black;
}

.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.non-underline {
  text-decoration: none;
}

.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a {
  color: #fff!important;
}

.navbar-fixed-top .navbar-brand,
.navbar-fixed-top .navbar-nav>li>a:hover {
  text-decoration: underline;
  background-color: transparent;
  color: #fff!important;
}

.navbar-nav>li>a:focus,
.navbar-nav>li>a:active,
.navbar-nav>li>a.active {
  background-color: transparent;
  color: #fff!important;
}

#logo-img {
  width: 70%;
}


/* End Navbar */


/* Jumbotron */

#first {
  padding: 0;
}

.jumbotron-image {
  max-width: 100%;
  height: auto;
}

h2>a {
  color: #565656;
}

a:hover {
  text-decoration: none;
}

#h1first {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  font-family: 'Philosopher', sans-serif;
}


/* End Jumbotron */


/* About */

#abouth2 {
  visibility: hidden;
}

#about-section {
  padding-top: 8%;
  padding-bottom: 10%;
}

.fadeInBlock {
  opacity: 0;
}

#p-about {
  font-size: 180%;
  font-family: 'Raleway', sans-serif;
}

#img-about {
  padding: 0;
}


/*End About*/


/*Portfolio*/

#portfolio-section {
  background-color: ;
  background: #B5927E;
  background: -webkit-linear-gradient(left top, #B5927E, #6C5461);
  background: -o-linear-gradient(bottom right, #B5927E, #6C5461);
  background: -moz-linear-gradient(bottom right, #B5927E, #6C5461);
  background: linear-gradient(to bottom right, #B5927E, #6C5461);
  padding-top: 2%;
  padding-bottom: 10%;
}

.headline {
  font-family: 'Merriweather', serif;
  color: #484A4A;
}

.headline.fadeInBlock>a {
  color: #484A4A;
}

.headline.fadeInBlock>a:hover {
  color: #484A4A;
}

#portfolio-id {
  margin-bottom: 2%;
}


/*End Portfolio*/


/*Contact*/

#contact-section {
  background-color: #4D3C4F;
  padding-top: 2%;
  padding-bottom: 5%;
}

.social-icons {
  color: #b7b7b7;
}

.fa {
  font-size: 40px;
  padding: 20px;
  transition: 0.5s;
}

.fa-facebook-official {
  vertical-align: middle;
  margin: auto;
}

.fa-twitter {
  vertical-align: middle;
  margin: auto;
}

.fa-free-code-camp {
  vertical-align: middle;
  margin: auto;
}

.fa-envelope {
  vertical-align: middle;
  margin: auto;
}

#facebook:hover {
  color: #3b5998;
}

#twitter:hover {
  color: #00aced;
}

#fcc:hover {
  color: #006401;
}

#email:hover {
  color: #92b8f4;
}

ul {
  list-style: none;
}


/*End Contact*/


/*Footer*/

footer {
  background-color: #382F4A;
}

#copy {
  color: #FFFFFF;
}


/*End Footer*/
<!--Navbar-->
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand"><img src="http://i64.tinypic.com/27wy82r.png" id="logo-img"></a>
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav pull-right">
        <li><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</div>
<!--End Navbar-->
<!--Jumbotron-->
<div class="row">
  <div class="col-md-12">
    <div class="jumbotron" id="first" href="#home">
      <img class="jumbotron-image" src="http://netdna.webdesignerdepot.com/uploads/2014/07/featured36.jpg">
      <h1 class="text-center fadeInPage" id="h1first">
        Welcome to Cosmos<br> web design
      </h1>
    </div>
  </div>
</div>
<!--End Jumbotron-->
<!--About-->
<div class="container" id="about-section">
  <div class="row">
    <div class="col-md-6">
      <h2 class="text-center" id="abouth2"><a name="about">About</a></h2>
      <p class="fadeInBlock" id="p-about">Cosmos Web Design was created by George Kech. I provide web solutions that require HTML, CSS, JavaScript and JQuery. I focus on serving the needs of each customer individually with complete satisfaction as my goal.</p>
    </div>
    <div class="col-md-6">
      <img src="https://www.topechelon.com/wp-content/uploads/2016/07/devices-web-design.png" alt="web design" class="img-responsive">
    </div>
  </div>
</div>
<!--End About-->
<!--Portfolio-->
<div class="container-inner" id="portfolio-section">
  <h2 class="text-center headline fadeInBlock" id="portfolio-id"><a name="portfolio">Portfolio</a> is coming soon...</h2>
  <div class="container">
    <div class="row text-center">
      <div class="col-md-4">
        <img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
      </div>
      <div class="col-md-4">
        <img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
      </div>
      <div class="col-md-4">
        <img src="https://lh4.googleusercontent.com/-fj6pace2cv0/U9Jt75Kq8PI/AAAAAAAARtE/ttg-4YuCOfQ/s250/exe_empty_thumbnail.jpg">
      </div>
    </div>
  </div>
</div>
<!--End Portfolio-->
<!--Contact-->
<div class="container-fluid">
  <div class="row" id="contact-section">
    <div class="col-md-12">
      <div class="text-center">
        <a href="https://www.facebook.com/georgefilmographia"><i class="social-icons fa fa-facebook-official" id="facebook"></i></a>
        <a href="https://twitter.com/kech_george"><i class="social-icons fa fa-twitter" id="twitter"></i></a>
        <a href="https://www.freecodecamp.com/georgemitnick"><i class="social-icons fa fa-free-code-camp" id="fcc"></i></a>
        <a href="georgebigmoviefreak@gmail.com"><i class="social-icons fa fa-envelope" id="email"></i></a>
        <h3 id="contactMe">
          <a name="contact"></a>
        </h3>
      </div>
    </div>
  </div>
</div>
<!--End Contact-->
<!--Footer-->
<footer>
  <p class="text-center" id="copy">George Kech &copy; 2017</p>
</footer>

以下是codepen的链接：Codepen

3 个答案:

答案 0 :(得分：3)

我认为这是你的顶级嵌套。您还需要将jumbotron包装到容器div中。如果你需要全宽，你可以使它变得流畅：

<div class="container-fluid">
    <div class="row">
    ...
</div>

一般来说，如果你查看基本的templates provided by boostrap's documentation，他们会将所有正文内容放入容器div中。

这是因为每一行都有-15px页边距。

答案 1 :(得分：2)

由你的Bootstrap引起的： 每个.row左右都有一个负边距，而每个.col-*左右都有一个填充相同的数量。

我们必须摆脱它。但是我们需要在.container类中找到它。

请看这里：https://codepen.io/anon/pen/QpOyyo

我添加了这个CSS：

/* Don't add padding to all elements that have classes like "col-md-*" */
[class^="col-md-"], 
[class*=" col-md-"] {
  padding-right: 0;
  padding-left: 0;
}
/* Add back the Bootstrap padding, if inside .container */
.container [class^="col-md-"], 
.container [class*=" col-md-"] {
  padding-right: 15px;
  padding-left: 15px;
}

/* Don't add negative margin for all rows */
.row {
  margin-left: 0;
  margin-right: 0;
}

/* Add back the Bootstrap margin, if inside .container */
.container .row {
  margin-left: -15px;
  margin-right: -15px;
}

更新：添加此内容以解决页脚问题。

.container-fluid {
  padding-right:0px;
  padding-left:0px;
}

footer p{
  margin:0;
}

答案 2 :(得分：0)

由div .col-md-12上的padding-right引起的。将其设置为0并且很好。 底部的空白区域由页脚中的#copy引起，添加margin-bottom：0。

相关问题
最新问题