引导程序3导航对齐

我使用引导程序3来构建WordPress主题。我有一个标题，主要内容，右侧边栏和页脚（所以这很简单，我猜）。引导程序3导航对齐

我遇到以下问题。我试图将“navbar-brand”与我的内容的同一点对齐。以下图片更好地解释了它。我想让“网站”开始我的白色背景（发布内容）开始的地方。

就如何实现这一目标的任何想法？我希望在每个支持的屏幕尺寸上从这一点开始。

谢谢。

下面的代码：

 <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
      <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">TheWebsite</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">NEWS</a></li> 
       <li><a href="#">INSPIRATION</a></li> 
       <li><a href="#">RESOURCES</a></li> 
       <li><a href="#">DESIGN</a></li> 
       <li><a href="#">CODE</a></li> 
       <li><a href="#">FREE STUFF</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">OTHER <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
        <li class="divider"></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
       <form class="navbar-form" role="search"> 
        <div class="form-group"> 
         <input type="text" class="form-control" placeholder="Just type and hit return to search..."> 
        </div> 
       </form>     
      </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
     </nav>

来源

2014-05-12 Popa Andrei

集'保证金：0 auto'的导航栏元素 –

不工作。已经试过 –

看起来您的导航栏内没有容器div。只需将navbar的内部包装到.container div中即可。

像：

<div role="navigation" class="navbar"> 
    <div class="container"> 
    <!-- .navbar content --> 
    </div> 
</div>

来源

2014-05-12 12:22:22 mMoovs

我的导航里面有一个容器流体。我纯粹使用bootstrap网站上发布的示例。我已经用代码更新了原始帖子。 –

将.container-fluid类更改为.container。容器流体没有定义宽度，所以它始终是100％，而Container的宽度始终是定义的。 – mMoovs

非常感谢，它工作。 –

没有看到你的代码，这是不可能知道你做了什么，但它看起来像你错过了从导航栏的代码的容器。我建议在文档这里考虑看看：

http://getbootstrap.com/components/#navbar

而且还可以查看该页面在这里来源：

http://getbootstrap.com/examples/theme/

它会告诉你，在第二个元素导航栏HTML需要有一个container类应用于它才能使Navbar项目正确对齐。

来源

2014-05-12 12:18:43 edcs

引导程序3导航对齐

回答

相关问题