【问题标题】：Responsive Navbar Breaks Under 768px?响应式导航栏低于 768 像素？
【发布时间】：2017-06-26 16:12:44
【问题描述】：

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

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

谁能告诉我导致这种情况发生的代码有什么问题？我已经看遍了 S.O. ＆谷歌，并未能找到似乎解决我的问题的答案。这是我的代码：

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;

}

【问题讨论】：

href="bootstrap/css/bootstrap.css" 和 elastic_grid.min.css 控制你的响应..

标签： html css twitter-bootstrap nav collapsable

【解决方案1】：

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

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

【讨论】：

此代码块来自引导程序，您的代码预计会折叠到汉堡菜单中。
查看getbootstrap.com/components/#navbar 当屏幕为
我注意到你的目标包含在你的切换中。
哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇！大声笑当我看着它时，有些东西一直盯着我的眼睛看……就是这样。大声笑在jmag上解决了这个问题。 :) 谢谢。 ;) 现在我只需要弄清楚如何使徽标保持可见，使其具有响应性，保持按钮垂直居中，并在
我还没有学会动态调整图像大小，但通常我有不同大小的图像，并使用媒体查询根据屏幕大小显示它们。这是一个很好的示例站点。 alistapart.com希望对你有帮助。