html - Bootstrap 导航栏文本/按钮位于页面的一半

Question

我在 header 中使用以下代码来提供固定的 Bootstrap 导航栏:

<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;
   }
}

对我来说毫无意义:)