2014-04-05 11 views
11

Istnieje tajemnicza przestrzeń (około 25 pikseli) między urządzeniem navbar i modułem zawartości. Używam rozdzielczości ekranu Chrome i 1600 x 900. Przyjrzałem się innym pytaniom z dokładnie tym samym problemem i zastosowałem podane odpowiedzi, ale problem nadal występuje. Ustawiłem dolną krawędź paska nawigacji na 0 i nadpisałem Bootstrap 3.1.1. HTMLMiejsce poniżej pod spodem na pasku nawigacji Bootstrap

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="utf-8"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
      <title>Title</title> 
      <meta name="description" content=""> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 

      <link rel="stylesheet" href="css/bootstrap.min.css"> 
      <link rel="stylesheet" href="css/hover.css"> 
      <link rel="stylesheet" href="css/style.css"> 
      <script src="js/lib/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     </head> 

     <body> 
       <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
        <div class="container-fluid"> 
         <div class="navbar-header"> 
          <a href="#"><img src="img/title.png"></img></a> 
         </div> 
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
          <ul class="nav navbar-nav navbar-right"> 
           <li><a href="#">Home</a></li> 
           <li><a href="#">About</a></li> 
           <li><a href="#">Contact</a></li> 
          </ul>  
         </div><!-- /.navbar-collapse --> 
        </div><!-- /.container-fluid --> 
       </nav> 
       <div class="content"></div>   
     </body> 

    </html> 

CSS

body { 
    padding: 70px 0 0 0; 
} 
html, body{ 
    height: 100%; 
} 
/* Top Navigation Bar */ 
.navbar-fixed-top { 
    background: #F7F7F7; 
    min-height: 0; 
    height: 45px; 
    padding: 5px 0; 
    margin-bottom: 0; 
} 
.navbar-header{ 
    height: 35px; 
    padding: 5px 0; 
} 
.content{ 
    width: 100%; 
    height: 450px; 
    background: rgb(255, 240, 240); 
} 

Odpowiedz

11

Zmień wyściółka ciało ..

body { 
    padding: 45px 0 0 0; 
} 

http://www.bootply.com/127737

+0

Hey, który pracował, hmm, jak chociaż? Że wyściółka powinna wpływać na górę ciała? Jestem zmieszany. Co ten fragment kodu faktycznie robi z "ciałem"? – Elton

+0

Aah ma taką samą wysokość jak navbar. Teraz rozumiem. – Elton

Powiązane problemy