响应式导航栏低于 768px？

Question

好的，所以我正在尝试为自己建立一个投资组合网站（部分用于实际使用，部分作为 FCC 课程的要求），到目前为止，我几乎已经完成了所有事情我想。

我在页面顶部有一个导航栏，它在大于 767 像素时的外观和工作方式都符合我的要求，但在那个尺寸或更小的尺寸下它会完全消失。实际栏本身保持可见，但菜单下拉切换不出现，我使用的徽标（占位符）也消失了，我也不希望发生这种情况。

谁能告诉我我的代码中有什么问题导致了这种情况发生？我已经看过了 S.O。 & Google，但未能找到似乎可以解决我的问题的答案。这是我的代码：

HTML

<!-- "DOCTYPE" Declaration -->
<!DOCTYPE HTML>

<!-- Start HTML -->
<html lang="en">

    <!-- Start HTML Header -->
    <head>
        <title>My Portfolio</title>

        <!-- Stylesheets -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" /><!-- Bootstrap.css -->
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /><!-- Font-Awesome -->
        <link href="elastic/css/elastic_grid.min.css" rel="stylesheet" type="text/css" /><!-- Elastic CSS -->
        <link href="mycss.css" rel="stylesheet" type="text/css" /><!-- Custom CSS -->

        <!--Javascripts -->
        <script src="jquery/jquery.js"></script><!-- jQuery -->
        <script src="bootstrap/js/bootstrap.js"></script><!-- Bootstrap jQuery -->
        <script src="jquery/jquery.scrollTo.js"></script><!-- "scrollTo" Smooth Scrolling jQuery plugin -->
        <!-- Elastic -->
        <script src="elastic/js/modernizr.custom.js"></script><!-- Modernizr -->
        <script src="elastic/js/classie.js"></script><!-- Classie -->
        <script src="elastic/js/elastic_grid.min.js"></script> <!-- Elastic -->
        <!-- Initializing & Customizing JS -->
        <script src="js/my.js"></script><!-- Personal Javascript for initializing & using Javascript & jQuery plugins -->

    </head>

    <!-- Start Page Body -->
    <body data-spy="scroll" data-target="#topNav" data-offset="75">

        <!-- Start Navigation -->
        <nav id="topNav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">

            <div class="navbar-header"> 

                <div class="navbar-collapse collapse " id="myNavbar" role="navigation">

                <!-- Site Logo -->
                <a href="#home"><img src="imgs/logo_ph.png" alt="Logo placeholder" class="navbar-brand img-responsive" /></a>

                <!-- Start Navbar Links -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                </button>

                <ul class="nav navbar-nav navbar-right nav-pills">
                    <li role="presentation"><a href="#about">About Me</a></li>
                    <li role="presentation"><a href="#portfolio">Portfolio</a></li>
                    <li role="presentation"><a href="#contact">Contact Me</a></li>
                    <li role="presentation"><a href="#footer"><i class="text-center fa fa-angle-double-down fa-lg"></i></a></li>
                </ul>

                </div>
            </div>
        </nav>
        <!-- End Navigation -->

        <!-- Start Site Container -->
        <div class="container container-fluid" id="home">

            <br><br>

            <!-- Start "About Me" Section -->
            <section id="about" class="secB center-block">
                <h1 class="text-center">About Me</h1>
                <br><br>
                <img class="me-left" src="imgs/me-1.png" alt="Me" />
                <p>This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
<img class="me-right" src="imgs/me-1.png" alt="Me" />
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text </p>
            <div class="clearfix"></div>
            </section>
            <!-- End "About Me" Section -->

            <!-- Start "Portfolio" Section -->
            <section id="portfolio" class="secA center-block">
                <h1 class="text-center">Sample Work</h1>
                <br><br>
                <div id="portfolio">

                    <script type="text/javascript">

    $(function(){

        $("#portfolio").elastic_grid({
            'filterEffect': 'fallperspective',
            'hoverDirection': true,
            'hoverDelay': 0,
            'hoverInverse': false,
            'expandingSpeed': 500,
            'expandingHeight': 500,
                'items' :
                [
                    {
                        'title'         : 'Covers',
                        'description'   : ' A collection of media covers I\'ve designed',
                        'thumbnail'     : ['imgs/covers/s/1.jpg', 'imgs/covers/s/2.jpg'],
                        'large'         : ['imgs/covers/l/1.jpg', 'imgs/covers/l/2.jpg'],
                        'button_list'   :
                        [
                            { 'title':'Demo', 'url' : 'http://bonchen.net/' },
                            { 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
                        ],
                        'tags'          : ['Covers']
                    },
                     {
                        'title'         : 'Logos',
                        'description'   : ' A collection of business logos I\'ve designed',
                        'thumbnail'     : ['imgs/logos/s/1.jpg', 'imgs/logos/s/2.jpg'],
                        'large'         : ['imgs/logos/l/1.jpg', 'imgs/logos/l/2.jpg'],
                        'button_list'   :
                        [
                            { 'title':'Demo', 'url' : 'http://bonchen.net/' },
                            { 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
                        ],
                        'tags'          : ['Logos']
                    }
                ]
        });
    });
</script


                </div>
            </section>
            <!-- End "Portfolio" Section -->

            <!-- Start "Contact" Section -->
            <section id="contact" class="secB center-block">
            <h1 class="text-center">Hire Me!</h1>
            <h5 class="text-center">...or you know...just HMU to chat. :P</h5>
                <br><br>
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
This is some text This is some text This is some text This is some text This is some text This is some text 
                </section>
            <!-- End "Contact" Section -->


        <!-- End Site Container -->
        </div>

            <!-- Start "Footer" Section -->
                <footer class="footer center-block" id="footer">

                    <!-- Footer Content-->
                    <div class="footer-content">

                        <!-- Footer text -->
                        <div class="footer-text text-center">
                            <span class="text-primary">Port-FAUX-lio</span> | &copy; Husayn Muhammad 2016
                        </div>

                        <!-- Social Media -->
                        <div class="footer-icons-box text-center">
                            <div class="fa-stack fa-2x sm-icon">
                                <a href="mailto:cloud4xL@gmail.com">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
                                </a>
                            </div>
                            <div class="fa-stack fa-2x sm-icon">
                                <a href="http://twitter.com/cloud4xL" target="_blank">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                                </a>
                            </div>
                            <div class="fa-stack fa-2x sm-icon">
                                <a href="http://freecodecamp.com/cloud4xL" target="_blank">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-free-code-camp fa-stack-1x fa-inverse"></i>
                                </a>
                            </div>
                            <div class="fa-stack fa-2x sm-icon">
                                <a href="https://www.linkedin.com/in/husayn-muhammad-040614106?trk=nav_responsive_tab_profile" target="_blank">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                                </a>
                            </div>
                        </div>

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

                    </div>
                </footer>
                <!-- End "Footer" Section -->

    <!-- End Body -->
    </body>

    <!-- End HTML -->
</html>

CSS

body {

    background-color: #e1e1e1;
    min-width: 430px !important;

}

/****** TOP NAVIGATION STYLES ******/

.navbar {

    background-color: #f2f2f2 !important; /*#190c03*/
    box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.5);

}

.navbar-brand {

    float: left !important;
    height: auto !important;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.4s, opacity 0.4s;

}

.navbar-brand:hover {

    transform: translateX(25px);
    opacity: 0;
    transition: transform 0.4s, opacity 0.4s;

}

.navbar-right {

    margin-right: 15px !important;

}

.navbar-header {

    position: relative !important;
    float: left !important;
    width: 100% !important;

}

.navbar-toggle {

    /* margin-top: 0px !important; */

}

.navbar ul {

    float: right !important;

}

.nav-pills > li {

    border: 1px solid rgba(0, 0, 0, 0.4);
    background-color: #d8661A;
    border-radius: 5px;
    margin-top: 3.5%;
    margin-right: 5px;
    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.4);
    transform: scale(1, 1);
    transition: box-shadow 0.4s, transform 0.4s;

}

.nav-pills > li:hover {

    transform: translateY(-5px);
    border: 1px solid rgba(0, 0, 0, 0.7);
    transition: transform 0.4s, border 0.4s;

}

.navbar-inverse .navbar-nav > .active > a {

    background-color: transparent !important;

}

.nav-pills > li.active {

    transform: translateY(-5px);
    height: 50%;
    border: 1px solid rgba(0, 0, 0, 0.7);
    color: white !important;
    background-color: #337ab7 !important;
    transition: transform 0.4s, color 0.4s, background-color 0.4s;

}

.nav-pills > li a {

    color: white !important;
    border-bottom: 1px solid transparent !important;
    transition: color 0.4s, border-bottom 0.4s !important;

}


.nav-pills > li.active > a:hover {

    color: white !important;

}

/****** HEADER IMAGE STYLES ******/

.mast {

    width: auto;
    position: relative;
    height: 600px;
    margin-top: 7%;
    margin-bottom: 2%; 
    /* box-shadow: 0 4px 2px 0px rgba(0, 0, 0, 0.7); */

}

/****** <SECTION> STYLES ******/

.secA, .secB {

    width: auto;
    min-height: 400px;
    height: auto;
    padding: 4% 10% 8%;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.secA {

    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto !important;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);

}

.secB {

    background-color: rgba(0, 0, 0, 0.2);

}

/****** ABOUT ME SECTION STYLES ******/

.me-left {

    float: left; 
    max-height: 200px; 
    border: 5px solid black; 
    border-radius: 50%; 
    padding-left: 8px; 
    margin: 10px 10px 10px 0px;
    background-color: white; 
    transform: scaleX(-1);

}

.me-right {


    float: right; 
    max-height: 200px; 
    border: 5px solid black; 
    border-radius: 50%; 
    padding-left: 8px; 
    margin: 10px 0px 10px 10px;
    background-color: white

}

/*********************************

**********sdFilterMe CSS**********

#sdfm-wrapper img, 
.sdfm-overlay {

    //Define the WIDTH of sdFilterMe Images 
    width: 200px !important;
    //Define the HEIGHT of sdFilterMe Images
    height: 200px !important;
    border-radius: 7px;
    overflow: hidden !important;

}

.sdfm-inner-wrapper {

    border-radius: 10px;
    margin: 5px !important;

}

.sdfm-overlay {

    background-color: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    font-size: 0.35em !important;
    text-overflow: clip !important;

}

.sdfm-overlay span {

    padding: 5% !important;
    margin: 8% auto !important;
    max-width: 85% !important;
    height: auto !important;
    word-wrap: break-word !important;
    border-radius: 2px !important;

}

*********************************/

/****** FOOTER STYLES ******/

.footer {

    width: auto;
    /* min-height: 150px; */
    /*margin-bottom: 5px !important;*/
    background-color: #1b1d1e;
    padding: 1.5% 5%;
    z-index: 3;
    border-top: 1px solid red;

}

.footer-content {

    /* border: 1px solid yellow; */
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

}

.footer-text {

    font-size: 1.5em;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.7);
    /* border: 1px solid white; */
    width: auto;
    padding: 5px;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 0.73%;
    display: flex;
    flex-flow: row wrap;
    align-self: flex-start;
    justify-content: center;

}

.footer-icons-box {

    /* border: 1px solid red; */
    width: auto;
    padding: auto;
    margin-left: 25px;
    margin-right: 25px;
    display: flex;
    flex-flow: row wrap;
    align-self: flex-end;

}

.sm-icon {

    display: inline-block;
    text-align: right;

}

.fa-circle {

    color: rgba(255, 255, 255, 0.9);
    transition: all 0.4s;

}

.footer-icons-box .fa-envelope, 
.fa-twitter, .fa-free-code-camp, .fa-linkedin {

    color: #1b1d1e;
    transform: scale(1, 1);
    transition: all 0.4s;

}

.footer-icons-box .fa-envelope:hover,
.fa-twitter:hover, .fa-free-code-camp:hover,
.fa-linkedin:hover  {

    color: #337ab7 !important;
    transform: scale(0.8, 0.8);
    transition: all 0.4s;

}

Answer 1

bootstrap 导航栏有一个内置的媒体查询，当您点击特定的屏幕大小时，它会切换某些 class。这是一个媒体查询示例，它在屏幕 > 768px 时更改 class 的属性。

@media (min-width: 768px) {

.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
      }
  }

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
    max-height: 340px;

}

我注意到正在切换的 myNavbar 的范围包括您将其切换到的汉堡菜单。

<div class="navbar-header"> 

            <div class="navbar-collapse collapse " id="myNavbar" role="navigation">

            <!-- Site Logo -->
            <a href="#home"><img src="imgs/logo_ph.png" alt="Logo placeholder" class="navbar-brand img-responsive" /></a>

            <!-- Start Navbar Links -->


            <ul class="nav navbar-nav navbar-right nav-pills">
                <li role="presentation"><a href="#about">About Me</a>           </li>
                <li role="presentation"><a href="#portfolio">Portfolio</a></li>
                <li role="presentation"><a href="#contact">Contact Me</a></li>
                <li role="presentation"><a href="#footer"><i class="text-center fa fa-angle-double-down fa-lg"></i></a></li>
            </ul>

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

响应式导航栏低于 768px？

Responsive Navbar Breaks Under 768px?

html

css

collapsable

nav

twitter-bootstrap

HTML

CSS