我对Bootstrap相对较新并且遇到了这个不寻常的问题 - 当我缩小窗口以测试响应性并单击切换菜单时,菜单会在站点名称旁边打开(在这种情况下为Greg)。
我有一种感觉,我需要将一些导航包装在不同的或附加的标签中,以使其正确显示。很乐意帮助你。
我目前的代码是:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">Greg</a>
<button class="navbar-toggle" data-toggle="collapse"
data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<div class="menu-flobble-container">
<ul id="menu-flobble" class="nav navbar-nav navbar-right">
<li id="menu-item-77"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77">
<a title="contact" href="http://datapups.com/contact/">contact</a>
</li>
<li id="menu-item-78"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78">
<a title="portfolio" href="http://datapups.com/portfolio/">portfolio</a>
</li>
<li id="menu-item-79"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79">
<a title="privacy" href="http://datapups.com/privacy/">privacy</a>
</li>
<li id="menu-item-86"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-86 dropdown">
<a title="Dairy" href="#" data-toggle="dropdown"
class="dropdown-toggle" aria-haspopup="true">Dairy
<span class="caret"></span>
</a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-88"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88">
<a title="Cheese" href="http://datapups.com/cheese/">Cheese</a>
</li>
</ul></li>
<li id="menu-item-87"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87">
<a title="Nuts" href="http://datapups.com/nuts/"> Nuts</a>
</li>
</ul>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
您可以添加bootstrap行和col div,以确保它位于其下方。
<div class = "container">
<div class="row>
<div class="col-md-12">
<a href = "#" class = "navbar-brand">Greg</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
rest of nav
</div>
</div>