jquery - Bootstrap 3 导航栏在崩溃前一直低于品牌

Question

我的导航栏位于容器的右侧，我的 Logo /品牌位于左侧。每当我缩小浏览器窗口时，导航栏就会开始向品牌移动，就像它应该的那样。然而，在最终崩溃之前，它最终会跌破品牌。我觉得这个问题与添加到导航栏 anchor 的填充有关。

HTML:

<nav class='navbar'>
        <div class="container-fluid">

            <div class='navbar-header'>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <i class="fa fa-bars fa-2x"></i>
                </button>
                <a class="navbar-brand" href="#"><img src='img/mobius2.png' /></a><a class="navbar-brand" href="#">TIMOTHY WOJTYLAK<span>WEB DESIGNER & DEVELOPER</span></a>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li class='activeNavLink'><a href="#">HOME</a></li>
                    <li class='skillSection'><a href="#skillSection">SKILLS</a></li>
                    <li class='projects'><a href="#section1">PROJECTS</a></li>
                    <li class='contact'><a href="#map">CONTACT</a></li>
                    <li class='resume'><a href="#contactForm">RESUME</a></li>
                </ul>
            </div>
        </div>
    </nav> 

CSS:

.navbar {
    width: 80%;
    margin: auto auto;}
.navbar img {}
.navbar a.navbar-brand {
    font-family: 'worksans-bold';
    font-size: 16px;
    color: #EFEFEF;}
.navbar a.navbar-brand span {
    font-size: 11px;
    display: block;}
#myNavbar li a {
    font-family: 'worksans-bold';
    padding: 20px 25px 40px 25px;
    color: #EFEFEF;}
#myNavbar li a:hover {
    color: #1E90FF;
    background: none;}
.activeNavLink {
    border-bottom: 5px solid #1E90FF;}

这是一个Fiddle我的意思。

Answer 1

您可以使用媒体查询来调整填充。看例子

.navbar {
  width: 80%;
  margin: auto auto;
}
.navbar img {} .navbar a.navbar-brand {
  font-family: 'worksans-bold';
  font-size: 16px;
  color: #EFEFEF;
}
.navbar a.navbar-brand span {
  font-size: 11px;
  display: block;
}
#myNavbar .navbar-nav > li > a {
  font-family: 'worksans-bold';
  padding: 20px 25px 40px 25px;
  color: #EFEFEF;
}
#myNavbar li a:hover {
  color: #1E90FF;
  background: none;
}
.activeNavLink {
  border-bottom: 5px solid #1E90FF;
}
@media (max-width: 1200px) {
  #myNavbar .navbar-nav > li > a {
    padding: 20px 5px 40px 5px;
  }
}
@media (max-width: 767px) {
  #myNavbar .navbar-nav > li > a {
    padding: 5px 15px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class='navbar'>
  <div class="container-fluid">
    <div class='navbar-header'>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <i class="fa fa-bars fa-2x"></i>

      </button>
      <a class="navbar-brand" href="#">
        <img src='http://placehold.it/50x40' />
      </a><a class="navbar-brand" href="#">TIMOTHY WOJTYLAK<span>WEB DESIGNER & DEVELOPER</span></a>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class='activeNavLink'><a href="#">HOME</a>

        </li>
        <li class='skillSection'><a href="#skillSection">SKILLS</a>

        </li>
        <li class='projects'><a href="#section1">PROJECTS</a>

        </li>
        <li class='contact'><a href="#map">CONTACT</a>

        </li>
        <li class='resume'><a href="#contactForm">RESUME</a>

        </li>
      </ul>
    </div>
  </div>
</nav>