引導導航欄文本/按鈕一半時頁面

Question

我使用一個頭下面的代碼，以提供固定的引導導航欄：

<header class="site-header"> 

<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a> 

    <!-- START NAVBAR/HEADER --> 
    <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="http://xxxx.github.io">Your Name</a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="http://xxxx.github.io/pages/About.html">About</a> 
        </li> 
        <li><a href="http://xxxx.github.io/pages/Blog.html">Blog</a> 
        </li> 
        <li><a href="http://xxxx.github.io/pages/Contact.html">Contact</a> 
        </li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="https://twitter.com/VitamnD"><i class="fa fa-twitter fa-2x"></i></a> 
        </li> 
        <li><a href="https://instagram.com/vitamnd/"><i class="fa fa-instagram fa-2x"></i></a> 
        </li> 
        <li><a href="https://github.com/xxxx"><i class="fa fa-github fa-2x"></i></a> 
        </li> 
        <li><a href="https://linkedin.com/in/yourname/"><i class="fa fa-linkedin fa-2x"></i></a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
    <!-- END NAVBAR --> 

的CSS如下：

body { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
} 

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    margin: 0 0 35px; 
    text-transform: uppercase; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 100; 
    letter-spacing: 1px; 
} 

p { 
    font-size: 1em; 
    font-family: 'Raleway', sans-serif; 
    color: #000; 
} 

.intro-text { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
} 

.full-width-image-1 { 
    background: url(../img/lake.jpg) no-repeat center center; 
    background-size: cover; 
    text-align: center; 
    padding: 100px 0; 
    height: 500px; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 100; 
} 

.full-width-image-2 { 
    background: url(../img/watercabin.jpg) no-repeat center center; 
    background-size: cover; 
    text-align: center; 
    height: 450px; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
} 

.logo-wrapper { 
    display: inline-block; 
} 

.name { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
} 

.section { 
    padding-top: 75px; 
    padding-bottom: 75px; 
} 

.section-heading { 
    font-family: 'Raleway', sans-serif; 
    font-size: 4em; 
    margin: 30px 0; 
} 

.home-heading { 
    font-family: 'Raleway', sans-serif; 
    font-size: 1.75em; 
    margin: 30px 0; 
    color: #000; 
} 

.section-lead { 
    margin: 30px 0; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
    color: #333; 
} 

.section-paragraph { 
    margin: 30px 0; 
    color: #333; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 

} 

footer { 
    margin: 50px 0; 
} 

@media (max-width: 768px) { 

.section-heading { 
    font-size: 4em; 
} 

.section { 
    padding-top: 25px; 
    padding-bottom: 25px; 
} 

} 

@media(min-width:768px) { 
    header .container { 
     padding: 200px 0 100px; 
    } 

    header .intro-text .name { 
     font-size: 4em; 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    } 

    header .intro-text .skills { 
     font-size: 1.75em; 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    } 
} 

.full-width-image-1 .intro-text { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-size: 2em; 
} 

.full-width-image-1 .intro-text .name { 
    font-size: 2em; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    color: #FFF; 
} 

header .intro-text .name { 
    display: block; 
    text-transform: uppercase; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-size: 2em; 
    font-weight: lighter; 
} 

.centered-text { 
    text-align:center 
} 

.align-right { 
    text-align: right 
} 

.glyphicon.bigger {font-size: 30px;} 

.social { 
    padding-right: 12px; 
} 

.container .row .col-lg-12.section .lead.section-lead { 
    color: #333; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

此代碼在我的基本站點的早期迭代中效果很好： http://xxxx.github.io

但是，我現在將此代碼添加到header.html文件以遷移到Jekyll。

在這種情況下它會產生脂肪導航欄，用文字和按鈕一半時的頁面可以在附截圖中可以看出：

https://www.dropbox.com/s/akmtoy3vgoecqgt/Screenshot%202014-09-26%2022.35.50.png?dl=0

如果導航欄高度被添加到CSS ，導航欄高度的變化，但按鍵留在同一位置：

https://www.dropbox.com/s/ss2y0ztzn4entui/Screenshot%202014-09-26%2022.16.18.png?dl=0

Answer 1

這可能就是食堂起來：

@media(min-width:768px) { 
    header .container { 
     padding: 200px 0 100px; 
    } 
} 

沒有意義的，我:)