Question

基本上，我的侧边菜单与页脚重叠，我似乎无法清除页脚来修复它。

这是我的测试文件：

<!DOCTYPE html>
<html>
    <head>
        <title>
            Bootstrap Side Menu Tests
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
            <![endif]-->
        <style>
        #footer_container{
            width: 300px;
            margin: 0 auto;
        }

        #footer_container ul
        {
        margin: 0;
        padding: 0;
        list-style-type: none;
        }

        #footer_container ul li { display: inline; }

        #footer_container ul li a
        {
        text-decoration: none;
        padding: .2em 1em;
        }

        </style>            
    </head>
    <body>

        <a href="#content" class="sr-only">Skip to main content</a>

        <div class="page-header">
          <h1>My Site</h1>
        </div>

        <div class="container-fluid">
            <div class="col-md-2" id="menu">

                <nav class="navbar navbar-default" role="navigation">

                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    <div class="collapse navbar-collapse">
                        <h2>Sidebar</h2>
                        <ul class="nav">
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Menu A 
                            </a>
                        </li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </nav>

            </div> 
            <div class="col-md-10" id="content">          
                <h1>Stats Home</h1>
            </div>
    </div>  

    <div class="clearfix"></div>

    <div class="container-fluid">
    <hr/>
         <footer>
            <div id="footer_container">
                <ul class="inline">  
                <li><a href="/default.cfm">Home</a></li>
                <li><a href="/about.cfm">About Us</a></li>
                <li><a href="/contact.cfm">Contact Us</a></li>
                </ul>
            </div>          
      </footer>
    </div>


    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script language="javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>


  </body>
</html>

http://jsfiddle.net/isherwood/B2c54/

Answer 1

.navbar-collapse {max-height: 999em;}

http://jsfiddle.net/isherwood/B2c54/3

另外，在ul上设置最大高度：

http://jsfiddle.net/isherwood/B2c54/4

ul.nav {
    max-height: 250px;
    overflow: auto;
}

您希望为此方法应用媒体查询规范，因此它不会影响移动设备。

Answer 2

.navbar-collapse 类存在问题。最大高度在css中定义。尝试更改值。

Answer 3

你好像在宣称边栏＆＃39;作为导航栏的一部分。虽然我可以看到你这样做的理由（我猜测它是否会让侧边栏在较小的屏幕上折叠到导航栏中）我个人不会推荐这个。 Bootstrap定义了清晰的组件，并且似乎没有尝试使用CSS修改其布局。我建议您查看示例页面（听起来您已经阅读过主要文档），以获取响应侧边栏的灵感，而不是尝试将导航栏组件重新用作侧边栏。

希望有所帮助，对不起，这不是一个更直接的答案

左侧导航菜单使用BS3重叠页脚

3 个答案: