2014-01-16 149 views
3

嘿,伙计们,对不起,如果这是一个简单的问题,但使用网站建设引导我才刚刚开始,我无法获得导航栏,我想的方式。理想情况下,我正在寻找像这样的东西:http://getbootstrap.com/examples/navbar/其中navbar具有填充右侧,左侧和顶部但仍居中的位置。我假设这是在CSS样式表中的某个地方,但我一直无法找到它。任何帮助你可以给我如何能够实现这种类型的导航栏将不胜感激。下面是我的代码,因为它代表的是导航栏引导导航栏大小和间距

`<!-- Static navbar --> 
    <div class="navbar navbar-default" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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">Text</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">text</a></li> 
     <li><a href="#">text</a></li> 
     <li><a href="#">text</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">text <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">text</a></li> 
      <li><a href="#">text</a></li> 
      <li><a href="#">text Sync</a></li> 
      <li><a href="#">text</a></li> 
      </ul> 
     </li> 
     <li><a href="#">text</a></li> 
     </ul> 

    </div><!--/.nav-collapse --> 
    </div> 

`

回答

2

这样一个div容器内包装你的导航栏 -

<div class= "container"> 
    <div class="navbar navbar-default" role="navigation"> 
    </div> 
</div> 

,也给你的.navbar CSS填充底20像素这样

.navbar { 
    padding-bottom: 20px; 
} 

希望这有助于

+0

+1 - 这效果很好:http://bootply.com/106189 – ZimSystem

+0

感谢您的帮助!我认为它几乎在那里,当我添加这些代码片段时,它创建了一个容器,但是当我在底部的顶部增加填充时,它看起来好像它是一个容器内的容器。任何想法如何处理? –