Bootstrap 3 navbar在折叠前一直低于品牌

Question

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

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

添加min-width：355px;到您的导航栏标题div

Answer 2

您可以使用媒体查询来调整您的填充。见例如

.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>