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;
}

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

1 个答案: