我在标题中使用以下代码来提供固定的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
答案 0 :(得分:1)
这可能是搞砸了:
@media(min-width:768px) {
header .container {
padding: 200px 0 100px;
}
}
对我没用;)