导航栏不会折叠，不会在Twitter Bootstrap 3模板中居中

Question

When I resize the window to mobile-size, the navbar does not collapse and the menu selection icon becomes unresponsive. 当我将窗口调整为移动大小时，导航栏不会折叠，并且菜单选择图标没有响应。 The navbar fails to center as well. 导航栏也无法居中。 (Sorry my english is not the best). （对不起，我的英语不是最好的）。

Here is the page head: 这是页面标题：

 <!DOCTYPE html>

    <html lang="en">
        <head>
            <meta charset="utf  -8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

            <title>Bootstrap 101 Template</title>

            <!--Bootstrap -->

            <link href="css/bootstrap.min.css" rel="stylesheet">

            <!--HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

            <![endif]-->

            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

            <!-- Latest compiled and minified JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Note CSS stylings: 注意CSS样式：

            <style>

                #header{
                    text-align: center;
                    background-color: #add8e6;
                    width: 100%;
                    padding-bottom 20px;
                    top: 0;
                    position: fixed;
                }

                .menu {
                    background-color: white;
                    line-height:30px;
                    letter-spacing:1px;
                    width:100%;
                    border: 3px solid grey;
                }

                .content{
                    position: relative;
                }               

                .fixed{
                    position:fixed;
                    z-index:99;
                }               

                @media (min-width: 768px) {
                    .navbar .navbar-nav {
                        display: inline-block;
                        float: none;
                        vertical-align: top;                    
                        background-color:white;
                    }

                    .navbar .navbar-collapse {
                        text-align: center;
                    }
                }

                #details{
                    background-color: blue;
                }

                #footer{

                }

                #topContainer{
                    background-color: green;

                }


            </style>

        </head>


        <body >

            <header id="header">

                <br/>
                <div><h1 style="font-size:400%;"><strong>Du suchst eine g&uuml;nstige Mietwohnung in Jena?</strong></h1></div>
                <div><h3 style="font-size:200%;">Deine neue 3-Zimmer-Wohnung liegt im 20min entfernten Rothenstein</h3></div>
                <br/>

            </header>

            <div class="content contentContainer" id="topContainer">    



                <div class="content">   

                    <nav class="menu navbar-default">

                        <div class="container" >

                            <div class="navbar-header navbar-default" >

                                <button type="button" class="navbar-toggle collapsed" 
                                data-toggle="collapse" data-target=".navbar-collapse" 
                                aria-expanded="false" aria-controls="navbar">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>

                            </div>

                                <div class="collapse navbar-collapse">

                                    <ul class="nav navbar-nav">
                                        <li class="active"><a href="#topContainer">Home</a></li>
                                        <li><a href="#details">About</a></li>
                                        <li><a href="#footer">Download The App</a></li>
                                    </ul>

                                </div>

                            </div>

                        </nav>  

                    </div>

                    <div id="topContainerContent">

                    </div>

                </div>



                <div class="content contentContainer" id="details"> 

                    <p> hallo</p>

                </div>



                <div class="content contentContainer" id="footer">  


                    <img  class="img-responsive" style="width: 150%; height: 900px;"src="http://thumbs.dreamstime.com/z/mann-der-laptop-im-b%C3%BCro-verwendet-37942789.jpg">
                    <p> hallo</p>
                    </img>
                </div>

Plugins: 外挂程式：

                <!--jQuery (necessary for Bootstrap's JavaScript plugins) -->
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
                <!--Include all compiled plugins (below), or include individual files asneeded -->
                <script src="js/bootstrap.min.js"></script>

                <script>

                    $(".contentContainer").css("min-height",$(window).height());

                    var headerHeight = $('#header').height();



                    $('nav').css("marginTop",headerHeight);

                    $(document).ready(function(){
                        $(window).bind('scroll', function() {
                            if ($(window).scrollTop() > headerHeight) {
                            $('nav').addClass('fixed').css("top", -headerHeight);
                            $('body').css("marginTop",headerHeight);
                            }
                            else {
                                $('nav').removeClass('fixed');
                                $('body').css("marginTop","0");
                            }
                        });
                    });

                    $(window).resize(function(){

                        $(".contentContainer").css("min-height",$(window).height());

                        headerHeight = $('#header').height();

                        $('nav').css("marginTop",headerHeight);

                        $(document).ready(function(){
                            $(window).bind('scroll', function() {
                                if ($(window).scrollTop() > headerHeight) {
                                $('nav').addClass('fixed').css("top", -headerHeight);
                                $('body').css("marginTop",headerHeight);
                                }
                                else {
                                    $('nav').removeClass('fixed');
                                    $('body').css("marginTop","0");
                                }
                            });
                        });
                    });


                </script>

            </body>

    </html>

Answer 1

3 Things: 3件事：

You should include jQuery before Bootstrap, in the head you include bootstrap CND but not jQuery, you are declaring jQuery at the end of the body tag. 您应该在Bootstrap之前添加jQuery，在head包含bootstrap CND，但不包括jQuery，您要在body标签的末尾声明jQuery。 Move that declaration of bootstrap from the head after the jQuery declaration at the bottom 在底部的jQuery声明后从头移出bootstrap的声明
About the nav bar not responding: 关于导航栏没有响应：

You have content inside the img tag almost at the end of the file: 您几乎在文件末尾的img标记内包含内容：

<img  class="img-responsive" style="width: 150%; height: 900px;"src="http://thumbs.dreamstime.com/z/mann-der-laptop-im-b%C3%BCro-verwendet-37942789.jpg">
    <p> hallo</p>
</img>

If you are using HTML5 then you should have this: 如果您使用的是HTML5，则应具有以下功能：

<img  class="img-responsive" style="width: 150%; height: 900px;"src="http://thumbs.dreamstime.com/z/mann-der-laptop-im-b%C3%BCro-verwendet-37942789.jpg" />
<p> hallo</p>

Or in XHTML this: 或在XHTML中：

<img  class="img-responsive" style="width: 150%; height: 900px;"src="http://thumbs.dreamstime.com/z/mann-der-laptop-im-b%C3%BCro-verwendet-37942789.jpg"></img>
<p> hallo</p>

Dont place content inside the img tag. 不要将内容放置在img标签内。

About centering the nav bar: 关于导航栏居中：

Include this in your CSS: 在CSS中添加以下内容：

div.navbar-collapse.collapse {
  line-height: 10px; /* There is a little space appearing at the
                        bottom, you can adjust it with this value */
  text-align: center;
}

ul.nav.navbar-nav {
  display: inline-block;
  float: none;
}

Working jsFiddle: http://jsfiddle.net/tLxneqkb/1/ 可用的jsFiddle： http ： //jsfiddle.net/tLxneqkb/1/

Answer 2

As far as the centering goes you're using menu in lieu of navbar (the default) so your CSS won't work since you're using the following: 就居中而言，您使用menu代替了navbar （默认值），因此您的CSS将无法使用，因为您正在使用以下代码：

 @media (min-width: 768px) {
     .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;                    
        background-color:white;
      }
     .navbar .navbar-collapse {
        text-align: center;
     }
 }

You also have navbar-default mixed with your navbar-header which is why your navbar isn't holding the white background under 768px. 您还将navbar-default与navbar-header混合在一起，这就是为什么您的navbar不能将白色背景保持在768px以下的原因。

The menu not opening has been addressed by others as far as the dependency order. 就依赖顺序而言，其他人已经解决了菜单未打开的问题。

 $(".contentContainer").css("min-height", $(window).height()); var headerHeight = $('#header').height(); $('nav').css("marginTop", headerHeight); $(document).ready(function() { $(window).bind('scroll', function() { if ($(window).scrollTop() > headerHeight) { $('nav').addClass('fixed').css("top", -headerHeight); $('body').css("marginTop", headerHeight); } else { $('nav').removeClass('fixed'); $('body').css("marginTop", "0"); } }); }); $(window).resize(function() { $(".contentContainer").css("min-height", $(window).height()); headerHeight = $('#header').height(); $('nav').css("marginTop", headerHeight); $(document).ready(function() { $(window).bind('scroll', function() { if ($(window).scrollTop() > headerHeight) { $('nav').addClass('fixed').css("top", -headerHeight); $('body').css("marginTop", headerHeight); } else { $('nav').removeClass('fixed'); $('body').css("marginTop", "0"); } }); }); });

 #header { text-align: center; background-color: #add8e6; width: 100%; padding-bottom 20px; top: 0; position: fixed; } .menu.navbar-default { background: white; line-height: 30px; letter-spacing: 1px; width: 100%; border: 3px solid grey; } .content { position: relative; } .fixed { position: fixed; z-index: 99; } @media (min-width: 768px) { .menu.navbar-default .navbar-nav { width: 100%; text-align: center; } .menu.navbar-default .navbar-nav > li { float: none; display: inline-block; } } #details { background-color: blue; } #footer {} #topContainer { background-color: green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <header id="header"> <br/> <div> <h1 style="font-size:400%;"><strong>Du suchst eine g&uuml;nstige Mietwohnung in Jena?</strong></h1> </div> <div> <h3 style="font-size:200%;">Deine neue 3-Zimmer-Wohnung liegt im 20min entfernten Rothenstein</h3> </div> <br/> </header> <div class="content contentContainer" id="topContainer"> <div class="content"> <nav class="menu navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#topContainer">Home</a> </li> <li><a href="#details">About</a> </li> <li><a href="#footer">Download The App</a> </li> </ul> </div> </div> </nav> </div> <div id="topContainerContent"></div> </div> <div class="content contentContainer" id="details"> <p>hallo</p> </div>

导航栏不会折叠，不会在Twitter Bootstrap 3模板中居中

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-09-22 17:15:28

解决方案2
1 2015-09-22 18:45:11

导航栏不会折叠，不会在Twitter Bootstrap 3模板中居中

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-09-22 17:15:28

解决方案2 1 2015-09-22 18:45:11

解决方案1
2 已采纳 2015-09-22 17:15:28

解决方案2
1 2015-09-22 18:45:11