堆棧內存溢出
  簡體   English   中英

自適應導航欄的分辨率低於768px？

[英]Responsive Navbar Breaks Under 768px?

 原文  2017-02-08 20:52:29  3   1    html/ css/ twitter-bootstrap/ nav/ collapsable

問題描述

好的，所以我想為自己建立一個投資組合網站（部分供現實世界使用，部分作為FCC課程的要求），到目前為止，我幾乎擁有了想要的一切。

我在頁面頂部有一個導航欄，它的外觀和工作方式與我想要的方式相同>大於767像素，但是在該尺寸或更小尺寸時，它完全消失了。 實際的條形本身仍然保持可見狀態，但不會出現菜單下拉開關，並且我正在使用的徽標（占位符）也消失了，我也不想發生這種情況。

誰能告訴我我的代碼出了什么問題導致這種情況發生？ 我遍歷了SO和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;

}

1 個解決方案

解決方案1
 0 已采納  2017-02-08 21:06:13

引導導航欄具有內置的媒體查詢，當您按下特定的屏幕尺寸時，該查詢會切換特定的類。 這是媒體查詢的示例，當屏幕> 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 響應式導航欄消失 &lt; 768px 為什么表格在768px以下無法響應，為什么頁腳不在底部 Bootstrap Navbar折疊點&lt;768px 導航欄切換消失在768px 768像素以下的帖子鏈接無法正常工作 響應式Twitter引導程序： <body> 當寬度&lt;767 / 768px時，會出現導航欄右邊距/邊距 響應式jQuery不起作用：在768px寬度以下單擊，並將鼠標懸停在768px以上 在平板電腦視圖中啟用引導程序的響應式導航菜單（768像素） 如何使Dropsdownlist +內聯文本在768px以下？ 屏幕低於768像素時將div項居中嗎？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM