如何让bootstrap导航栏下拉整个页面在手机菜单上？ [英] How to make bootstrap navbar to push down the whole page on mobile menu?

问题描述

虽然有一个相关问题，他的问题似乎是我的解决方案，但我没有想法取得进展。

我使用bootstrap navbar固定到顶部使导航菜单。
在移动页面（屏幕尺寸小），我必须通过按一下最右上角的一些菜单按钮。

然而，当菜单

这里是我的代码..我应该怎么编辑？

 < div class =navbar navbar-default navbar-fixed-toprole = navigation> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =＃！/> Brand< / a> 
< / div> 
< div class =navbar-collapse collapse> 
< ul class =nav navbar-nav> 
< li>< a href =＃！/ notice> notice< / a>< / li> 
< li>< a href =＃！/ board> board< / a>< / li> 
< / ul> 
 
< ul class =nav navbar-nav navbar-right> 
< li> 
< a id =a-logouthref =＃！/ logout>退出< / a> 
< / li> 
< li> 
< a href =＃！/ user>您的专页< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
  

解决方案

看来你已经定义了.navbar的高度这是强制折叠菜单覆盖。只需将.navbar中的高度更改为min-height

  .navbar 
 {
 min-height：65px ; //或ur的价值
} 
  

如果没有解决， / p>

Although there is a related question, his problem seems like my solution but I have no Idea to make progress.

I'm using bootstrap navbar that is fixed to the top to make.. navigation menu. on mobile pages(where screen size is small), I have to bring them by pressing some menu button on top-rightmost corner.

however when the menu pops up, I'd like it to push the page down, instead of overlaying it.

here's my code.. what edit should I make to get rid of overlaying?

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <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" href="#!/">Brand</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#!/notice">notice</a></li>
                <li><a href="#!/board">board</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                <a id="a-logout" href="#!/logout">sign out</a>
                </li>
                <li>
                <a href="#!/user">Your page</a>
                </li>
            </ul>
        </div>
    </div>
</div>

解决方案

It seems that you have defined the height of .navbar which is forcing collapsed menu to overlay. Just change height in .navbar to min-height

.navbar
{
 min-height:65px; // or value of ur desire
}

If not solved kindly post ur CSS too

这篇关于如何让bootstrap导航栏下拉整个页面在手机菜单上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！