Twitter bootstrap 使用BS3重叠页脚的左导航菜单_Twitter Bootstrap_Twitter Bootstrap 3

Twitter bootstrap 使用BS3重叠页脚的左导航菜单

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 使用BS3重叠页脚的左导航菜单,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,基本上，我的侧菜单与页脚重叠，我似乎无法清除页脚来修复它这是我的测试文件： <!DOCTYPE html> <html> <head> <title> Bootstrap Side Menu Tests </title> <meta name="viewport" content="width=device-width, initial-scale=

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

这是我的测试文件：

<!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>


引导端菜单测试
#页脚容器{
宽度：300px；
保证金：0自动；
}
#页脚容器ul
{
保证金：0；
填充：0；
列表样式类型：无；
}
#页脚容器ul li{display:inline；}
#页脚_容器ul li a
{
文字装饰：无；
填料：2米1米；
}
我的网站
边栏
























统计家

或者，在

ul

上设置最大高度：

您希望为这种方法应用媒体查询规范，这样就不会影响移动设备。

您似乎将“侧栏”声明为导航栏的一部分。虽然我可以理解你这样做的基本原理（我猜这是为了让边栏在更小的屏幕上折叠成导航栏），但我个人不推荐这样做。Bootstrap定义了清晰的组件，并且似乎无法很好地使用CSS修改它们的布局。我建议您查看示例页面（听起来您已经阅读了主要文档）以获得响应侧栏的灵感，而不是尝试将导航栏组件重新定位为侧栏

希望这会有所帮助，抱歉，这不是一个更直接的答案。navbar collapse类存在问题。最大高度在css中定义。尝试更改该值。

将其应用于.navbar折叠也会在我喜欢的mobile（调整浏览器大小）中扩展整个菜单（而不是查看滚动条）。

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

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