1. 首頁
  2. 問答
  3. 刪除頂部的額外空白處

刪除頂部的額外空白處

2014-08-31 261 views
0

我使用bootstrap carousel主題製作了一個網頁。頂部的白色空間仍然可見。我想刪除它。我正在提供我的旋轉木馬CSS文件和我的HTML文件。我試圖改變填充和邊距，但似乎沒有任何工作。 請幫忙。刪除頂部的額外空白處

/* GLOBAL STYLES 
-------------------------------------------------- */ 
/* Padding below the footer and lighter body text */ 

body { 
    padding-bottom: 40px; 
    color: #5a5a5a; 
} 



/* CUSTOMIZE THE NAVBAR 
-------------------------------------------------- */ 

/* Special class on .container surrounding .navbar, used for positioning it into place. */ 
.navbar-wrapper { 
    position: absolute; 
    padding-top: 0; 
    margin-top: 0; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 20; 
} 

/* Flip around the padding for proper display in narrow viewports */ 
.navbar-wrapper > .container { 
    padding-right: 0; 
    padding-left: 0; 
    padding-top: 0; 
} 
.navbar-wrapper .navbar { 
    padding-right: 15px; 
    padding-left: 15px; 
} 
.navbar-wrapper .navbar .container { 
    width: auto; 
} 


/* CUSTOMIZE THE CAROUSEL 
-------------------------------------------------- */ 

/* Carousel base class */ 
.carousel { 
    height: 500px; 
    margin-bottom: 60px; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    height: 500px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 



/* MARKETING CONTENT 
-------------------------------------------------- */ 

/* Center align the text within the three columns below the carousel */ 
.marketing .col-lg-4 { 
    margin-bottom: 20px; 
    text-align: center; 
} 
.marketing h2 { 
    font-weight: normal; 
} 
.marketing .col-lg-4 p { 
    margin-right: 10px; 
    margin-left: 10px; 
} 


/* Featurettes 
------------------------- */ 

.featurette-divider { 
    margin: 80px 0; /* Space out the Bootstrap <hr> more */ 
} 

/* Thin out the marketing headings */ 
.featurette-heading { 
    font-weight: 300; 
    line-height: 1; 
    letter-spacing: -1px; 
} 



/* RESPONSIVE CSS 
-------------------------------------------------- */ 

@media (min-width: 768px) { 

    /* Navbar positioning foo */ 
    .navbar-wrapper { 
    margin-top: 20px; 
    } 
    .navbar-wrapper .container { 
    padding-right: 15px; 
    padding-left: 15px; 
    } 
    .navbar-wrapper .navbar { 
    padding-right: 0; 
    padding-left: 0; 
    } 

    /* The navbar becomes detached from the top, so we round the corners */ 
    .navbar-wrapper .navbar { 
    border-radius: 4px; 
    } 

    /* Bump up size of carousel content */ 
    .carousel-caption p { 
    margin-bottom: 20px; 
    font-size: 21px; 
    line-height: 1.4; 
    } 

    .featurette-heading { 
    font-size: 50px; 
    } 
} 

@media (min-width: 992px) { 
    .featurette-heading { 
    margin-top: 120px; 
    } 
}

我的html文件

<!DOCTYPE html> 
<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"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="../../favicon.ico"> 

    <title>Carousel Template for Bootstrap</title> 

    <!-- Bootstrap core CSS --> 
    <link href="/Users/amandhapola/Desktop/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> 

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="/Users/amandhapola/Desktop/bootstrap/docs/assets/js/ie-emulation-modes-warning.js"></script> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

    <!-- Custom styles for this template --> 
    <link href="/Users/amandhapola/Desktop/bootstrap/docs/examples/carousel/carousel.css" rel="stylesheet"> 
    <link href="/Users/amandhapola/Desktop/nlog.css" rel="stylesheet"> 
<link href="/Users/amandhapola/Desktop/fb.css" rel="stylesheet"> 
    </head> 
<!-- NAVBAR 
================================================== --> 
    <body> 
    <div class="navbar-wrapper"> 
     <div class="container"> 

     <div class="navbar navbar-inverse navbar-static-t 
     op" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
       <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="#">Resumeeeee !!!</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#about">About</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <!--<li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li>--> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
      <li><a href="../navbar/" data-toggle="modal" data-target="#myModal">Login</a></li> 
      <li><a href="../navbar-static-top/" data-toggle="modal" data-target="#myModal1">Signup</a></li> 
      </ul> 

        <!--<ul class="nav pull-right">--> 
       <!-- <ul class="nav nav-pills" style="float:right">--> 

        <!--</ul>--> 

       <!--</ul>--> 
      </div> 
      </div> 
     </div> 

     </div> 
    </div> 


    <!-- Carousel 
    ================================================== --> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="/Users/amandhapola/Desktop/six.jpg" alt="First slide"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>Stay on the top.</h1> 
       <p>Get noticed by your super seniors</p> 
       <p><a class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal1" href="#" role="button">Sign up today</a></p> 
      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="/Users/amandhapola/Desktop/four.jpg" alt="Second slide"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>Get selected</h1> 
       <p>we make sure your supersenior recoomends you as fast as possile</p> 
       <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="/Users/amandhapola/Desktop/third.jpg" alt="Third slide"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>One thing more for good measure.</h1> 
       <p>Get your resume viewed by many other people who are at the top of their level</p> 
       <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
      </div> 
      </div> 
     </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
    </div><!-- /.carousel --> 



    <!-- Marketing messaging and featurettes 
    ================================================== --> 
    <!-- Wrap the rest of the page in another container to center all the content. --> 

    <div class="container marketing"> 

     <!-- Three columns of text below the carousel --> 
     <div class="row"> 
     <div class="col-lg-4"> 
      <img class="img-circle" src="/Users/amandhapola/Desktop/face1.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;"> 
      <h2>Martin Rodriguez</h2> 
      <p>"I got Placed at Amazon .Thanks to Resume"</p> 
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
     </div><!-- /.col-lg-4 --> 
     <div class="col-lg-4"> 
      <img class="img-circle" src="/Users/amandhapola/Desktop/face2.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;"> 
      <h2>Tim Dunn</h2> 
      <p>"I got Placed at microsoft .Thanks to Resume"</p> 
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
     </div><!-- /.col-lg-4 --> 
     <div class="col-lg-4"> 
      <img class="img-circle" src="/Users/amandhapola/Desktop/face3.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;"> 
      <h2>Steve Mccharthy</h2> 
      <p>"I use Resume to hire from the abundant fresh talent around the world"</p> 
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
     </div><!-- /.col-lg-4 --> 
     </div><!-- /.row --> 


     <!-- START THE FEATURETTES --> 

     <hr class="featurette-divider"> 

     <div class="row featurette"> 
     <div class="col-md-7"> 
      <h2 class="featurette-heading">Get Helped <br><span class="text-muted">It'll blow your mind.</span></h2> 
      <p class="lead">Super Seniors will help you on your highway to success</p> 
     </div> 
     <div class="col-md-5"> 
      <img class="featurette-image img-responsive" src="/Users/amandhapola/Desktop/super.jpg" alt="Generic placeholder image"> 
     </div> 
     </div> 

     <hr class="featurette-divider"> 

     <div class="row featurette"> 
     <div class="col-md-5"> 
      <img class="featurette-image img-responsive" src="/Users/amandhapola/Desktop/try.jpg" alt="Generic placeholder image"> 
     </div> 
     <div class="col-md-7"> 
      <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> 
      <p class="lead">Try it for free.</p> 
     </div> 
     </div> 

     <hr class="featurette-divider"> 

     <div class="row featurette"> 
     <div class="col-md-7"> 
      <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> 
      <p class="lead">Get Placed At you Dream Company</p> 
     </div> 
     <div class="col-md-5"> 
      <img class="featurette-image img-responsive" src="/Users/amandhapola/Desktop/logo.jpg" alt="Generic placeholder image"> 
     </div> 
     </div> 

     <hr class="featurette-divider"> 

     <!-- /END THE FEATURETTES --> 


     <!-- FOOTER --> 
     <footer> 
     <p class="pull-right"><a href="#">Back to top</a></p> 
     <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p> 
     </footer> 

    </div><!-- /.container --> 






<!--  sadasdasdasdasd    --> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="container"> 
    <div class="row"> 

    <div class="main"> 

     <h3>Please Log In</h3> 
     <div class="row"> 
     <div class="col-xs-6 col-sm-6 col-md-6"> 
      <a href="#" class="btn btn-lg btn-primary btn-block">Facebook</a> 
     </div> 
     <div class="col-xs-6 col-sm-6 col-md-6"> 
      <a href="#" class="btn btn-lg btn-info btn-block">Google</a> 
     </div> 
     </div> 
     <div class="login-or"> 
     <hr class="hr-or"> 
     <span class="span-or">or</span> 
     </div> 

     <form role="form"> 
     <div class="form-group"> 
      <label for="inputUsernameEmail" class="abovelogin">Username or email</label> 
      <input type="text" class="form-control" id="inputUsernameEmail"> 
     </div> 
     <div class="form-group"> 
      <a class="pull-right" href="#" id="fpassword">Forgot password?</a> 
      <label for="inputPassword" class="abovelogin">Password</label> 
      <input type="password" class="form-control" id="inputPassword"> 
     </div> 
     <div class="checkbox pull-right"> 
      <label class="abovelogin"> 
      <input type="checkbox"> 
      Remember me </label> 
     </div> 
     <button type="submit" class="btn btn btn-primary"> 
      Log In 
     </button> 
     </form> 

    </div> 

    </div> 
</div> 
</div> 




<!--  sadasdasdasdasd    --> 








<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="container" id="wrap"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 
      <form action="r" method="post" accept-charset="utf-8" class="form" role="form"> <legend>Sign Up</legend> 
        <h4>It's free and always will be.</h4> 
        <div class="row"> 
         <div class="col-xs-6 col-md-6"> 
          <input type="text" name="firstname" value="" class="form-control input-lg" placeholder="First Name" />      </div> 
         <div class="col-xs-6 col-md-6"> 
          <input type="text" name="lastname" value="" class="form-control input-lg" placeholder="Last Name" />      </div> 
        </div> 
        <input type="text" name="email" value="" class="form-control input-lg" placeholder="Your Email" /><input type="password" name="password" value="" class="form-control input-lg" placeholder="Password" /><input type="password" name="confirm_password" value="" class="form-control input-lg" placeholder="Confirm Password" />      
        <label id ="bdate">Birth Date</label>     <div class="row"> 
         <div class="col-xs-4 col-md-4"> 
          <select name="month" class = "form-control input-lg"> 
<option value="01">Jan</option> 
<option value="02">Feb</option> 
<option value="03">Mar</option> 
<option value="04">Apr</option> 
<option value="05">May</option> 
<option value="06">Jun</option> 
<option value="07">Jul</option> 
<option value="08">Aug</option> 
<option value="09">Sep</option> 
<option value="10">Oct</option> 
<option value="11">Nov</option> 
<option value="12">Dec</option> 
</select>      </div> 
         <div class="col-xs-4 col-md-4"> 
          <select name="day" class = "form-control input-lg"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
</select>      </div> 
         <div class="col-xs-4 col-md-4"> 
          <select name="year" class = "form-control input-lg"> 
<option value="1935">1935</option> 
<option value="1936">1936</option> 
<option value="1937">1937</option> 
<option value="1938">1938</option> 
<option value="1939">1939</option> 
<option value="1940">1940</option> 
<option value="1941">1941</option> 
<option value="1942">1942</option> 
<option value="1943">1943</option> 
<option value="1944">1944</option> 
<option value="1945">1945</option> 
<option value="1946">1946</option> 
<option value="1947">1947</option> 
<option value="1948">1948</option> 
<option value="1949">1949</option> 
<option value="1950">1950</option> 
<option value="1951">1951</option> 
<option value="1952">1952</option> 
<option value="1953">1953</option> 
<option value="1954">1954</option> 
<option value="1955">1955</option> 
<option value="1956">1956</option> 
<option value="1957">1957</option> 
<option value="1958">1958</option> 
<option value="1959">1959</option> 
<option value="1960">1960</option> 
<option value="1961">1961</option> 
<option value="1962">1962</option> 
<option value="1963">1963</option> 
<option value="1964">1964</option> 
<option value="1965">1965</option> 
<option value="1966">1966</option> 
<option value="1967">1967</option> 
<option value="1968">1968</option> 
<option value="1969">1969</option> 
<option value="1970">1970</option> 
<option value="1971">1971</option> 
<option value="1972">1972</option> 
<option value="1973">1973</option> 
<option value="1974">1974</option> 
<option value="1975">1975</option> 
<option value="1976">1976</option> 
<option value="1977">1977</option> 
<option value="1978">1978</option> 
<option value="1979">1979</option> 
<option value="1980">1980</option> 
<option value="1981">1981</option> 
<option value="1982">1982</option> 
<option value="1983">1983</option> 
<option value="1984">1984</option> 
<option value="1985">1985</option> 
<option value="1986">1986</option> 
<option value="1987">1987</option> 
<option value="1988">1988</option> 
<option value="1989">1989</option> 
<option value="1990">1990</option> 
<option value="1991">1991</option> 
<option value="1992">1992</option> 
<option value="1993">1993</option> 
<option value="1994">1994</option> 
<option value="1995">1995</option> 
<option value="1996">1996</option> 
<option value="1997">1997</option> 
<option value="1998">1998</option> 
<option value="1999">1999</option> 
<option value="2000">2000</option> 
<option value="2001">2001</option> 
<option value="2002">2002</option> 
<option value="2003">2003</option> 
<option value="2004">2004</option> 
<option value="2005">2005</option> 
<option value="2006">2006</option> 
<option value="2007">2007</option> 
<option value="2008">2008</option> 
<option value="2009">2009</option> 
<option value="2010">2010</option> 
<option value="2011">2011</option> 
<option value="2012">2012</option> 
<option value="2013">2013</option> 
</select>      </div> 
        </div> 
        <label class="sidetext">Gender : </label>     <label class="radio-inline" id="rbuttonmale"> 
         <input type="radio" name="gender" value="M" id=male/> 
              Male 
        </label> 
        <label class="radio-inline" id="rbuttonfemale"> 
         <input type="radio" name="gender" value="F" id=female />      Female 
        </label> 
        <br /> 
       <span class="help-block">By clicking Create my account, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.</span> 
        <button class="btn btn-lg btn-primary btn-block signup-btn" type="submit"> 
         Create my account</button> 
      </form>   
      </div> 
</div>    
</div> 
</div> 
</div> 



































    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script src="/Users/amandhapola/Desktop/bootstrap/dist/js/bootstrap.min.js"></script> 

    <script src="/Users/amandhapola/Desktop/bootstrap/docs/assets/js/docs.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="/Users/amandhapola/Desktop/bootstrap/docs/assets/js/ie10-viewport-bug-workaround.js"></script> 






    </body> 
</html>

來源

2014-08-31 AmanDhapola

+0

請在[jsfiddle]（http://jsfiddle.net） – 2014-08-31 10:39:30

+0

或[Bootply]（http://www.bootply.com/new#）上顯示您的代碼的工作演示，以默認包含引導程序。 – misterManSam 2014-08-31 10:40:41

+0

試試css重置？ 'body {margin：0}' – Fancyoung 2014-08-31 10:47:47

回答

2

身體和.navbar，包裝.container都默認邊距，（一般爲8個像素，注意利潤崩潰時，它們重疊，所以你沒有得到16個像素） ，添加這個來解決這個問題。

body { 
    margin:0 
    padding: 0 0 40px 0; /* zero padding except 40 pixels on bottom */ 
} 
.navbar-wrapper { 
    margin:0; 
} 
.container { 
    margin-top: 0; 
}

通常我做的是通過在開始時設置所有邊距和補零，並指定利潤率我需要他們，留下任何機會開始。

* { 
margin:0; 
padding:0; 
}

我認爲這是值得的最安全的方法。

來源

2014-08-31 10:45:57 Wayne

相關問題

 相關問題