汉堡包菜单与导航栏断开连接

Question

我试图在打开菜单时让导航栏直接位于移动视图中的汉堡菜单按钮下方。但是现在它在图像下方，而且看起来没有连接。

我该如何将它放到汉堡按钮下方？

拨动导航

<!-- 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><a href="#">Home</a></li> 
        <li><a href="#">Mission</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">Staff</a></li> 
        <li><a href="#">Testimonials</a></li> 
       </ul> 
      </div> 
     </nav> 

https://jsfiddle.net/xbemtom0/4/

Answer 1

只需添加如下的工作的，有用于图像DIV布局问题。

<div class="row collapse navbar-collapse" id="collapsemenu"> 
<ul class="nav navbar-nav"> 
<li><a href="#">Home</a></li> 
<li ><a href="#">Mission</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Staff</a></li> 
<li><a href="#">Testimonials</a></li> 
</ul> </div> 

<div class="row picture" > 
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"/> 
</div> 

</div> 
</nav> 

（OR）

<nav class="nav navbar-default"> 
<ul class="nav navbar-nav top-right"> 
<li>Search</li> 
<li>Language</li> 
<li>Account</li> 
<li>Bag</li> 
</ul> 
</nav> 
<div class="container header"> 
<div class="row top-right-nav"> 

</div> 

<div class="row picture" > 
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"/> 
</div> 

<nav class="navbar navbar-default"> 
<button type="button" class="navbar-toggle collapsed navbar-hamburger" 
data-toggle="collapse" 
data-target="#collapsemenu" 
> 
<span class="sr-only">Toggle Navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<div class="row collapse navbar-collapse" id="collapsemenu"> 
<ul class="nav navbar-nav"> 
<li><a href="#">Home</a></li> 
<li ><a href="#">Mission</a></li> 
<li><a href="#">Services</a></li> 
<li><a href="#">Staff</a></li> 
<li><a href="#">Testimonials</a></li> 
</ul> </div> 
</nav></div> 

<div class="container"> 

<div class="row"> 


<h2>hi</h2> 
</div><!-- row --> 
</div><!-- content container --> 

.top-right{ 
    float:right; 
}