Bootstrap:下拉菜单涵盖内容 [英] Bootstrap: dropdown menu covers content

查看:123
本文介绍了Bootstrap:下拉菜单涵盖内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的代码保存在 http://jsfiddle.net/qba2xgh6/1/ ,它来自Bootstrap官方网站。



以下是代码:

 < div class =navbar navbar-default navbar-fixed-toprole =navigation> 
< div class =container>
< div class =navbar-header>
< button type =buttonclass =navbar-toggle collapseddata-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 =index.php>我的品牌< / a>
< / div>
< div class =collapse navbar-collapse navbar-right>
< ul class =nav navbar-nav>
< li>< a href =index.php>主页< / a>< / li>
< li>< a href =#contact>联络< / a>< / li>
< / ul>
< / div><! - /。nav-collapse - >
< / div>
< / div>

< div class =container main>
< p>
您好,主要内容从这里开始。
您好,主要内容从这里开始。
您好,主要内容从这里开始。
您好,主要内容从这里开始。
您好,主要内容从这里开始。
您好,主要内容从这里开始。您好,主要内容从这里开始。
< / p>
< / div>

问题是,当我点击右上角的下拉按钮时,出现下拉菜单,涵盖了主要内容。我怎样才能避免这种情况?我希望它能推下主要内容。

解决方案

这是因为您正在使用类 navbar -fixed-top ,使导航栏保持固定 - 超出文档流程。您可以:


  • 移除该类。但它也会删除所有设备和解决方案上的行为。

  • 如果您想保留所有设备而不是移动设备,请添加以下媒体查询: / p>

      @media(max-width:768px){
    .main {
    margin-top:0;
    }
    .navbar-fixed-top {
    position:static;


    code $

    $ b $ p

    检查 DemoFiddle


    My code is save at http://jsfiddle.net/qba2xgh6/1/ , it comes from the Bootstrap official website.

    Below is the code:

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" 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="index.php">My Brand</a>
        </div>
        <div class="collapse navbar-collapse navbar-right">
          <ul class="nav navbar-nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    
    <div class="container main">
      <p>
        Hello, the main content starts here.
        Hello, the main content starts here.
        Hello, the main content starts here.
        Hello, the main content starts here.
        Hello, the main content starts here.
        Hello, the main content starts here.Hello, the main content starts here.
      </p>
    </div>
    

    The problem is that when I clicked the dropdown button at the right upper corner, the dropdown menu appears and covers the main content. How can I avoid this? I would like it to push down the main content.

    解决方案

    That's because you are using the class navbar-fixed-top that makes the navbar stay fixed -- out of the flow on the document. You can:

    • Remove that class. But it will delete the behavior on all devices and resolutions too.

    • If you want to keep that for all but not for mobile then add this media query:

      @media (max-width:768px) {
          .main {
              margin-top:0;
          }
          .navbar-fixed-top {
              position:static;
          }
      } 
      

    Check this DemoFiddle

    这篇关于Bootstrap:下拉菜单涵盖内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆