堆棧內存溢出
  簡體   English   中英

引導程序3中的Navbar無法正常折疊

[英]Navbar doesn't collapse properly in bootstrap 3

 原文  2016-10-06 16:21:31  8   2    html/ css/ twitter-bootstrap-3

問題描述

導航欄在全屏模式下可以正常工作，但是當我將窗口縮小時，切換選項無法正確顯示。

想知道是否有人知道如何修復它。

這是導航欄的CSS 

 .navbar { border-radius: 0; } .navbar-new { background-color: white; height: 120px; padding-left: 20px; } .navbar-new .navbar-brand, .navbar-new .navbar-brand:hover, .navbar-new .navbar-brand:focus { color: #FFF; } .navbar-new .navbar-nav > li > a { color: #FFF; } .navbar-new .navbar-nav > li > a:hover, .navbar-new .navbar-nav > li > a:focus { background-color: #fcf8e3; } .navbar-new .navbar-nav > .active > a, .navbar-new .navbar-nav > .active > a:hover, .navbar-new .navbar-nav > .active > a:focus { color: #FFF; background-color: #fcf8e3; } .navbar-new .navbar-text { color: black; } .navbar-new .navbar-toggle { border-color: #0FA6A1; } .navbar-new .navbar-toggle:hover, .navbar-new .navbar-toggle:focus { background-color: #fcf8e3; } .navbar-new .navbar-toggle .icon-bar { background-color: #FFF; }`enter code here` .navbar-new .navbar-toggle .icon-bar { background-color: #FFF; } And Here is the html file 
 <!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"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="footer, address, phone, icons" /> <title>IMC chile</title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/index.css" rel="stylesheet"> <link href="css/navbar.css" rel="stylesheet"> <link href="css/footer.css" rel="stylesheet"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css"> <!-- bxSlider CSS file --> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <!-- 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.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- Navigation --> <nav class="navbar navbar-new navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" style="color:black;" href="index.html"><img class="img-responsive" width="100%;" max-height="100px;" src="img/logo/logosmall.jpg" alt=""></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div id="nav"> <ul class="nav navbar-nav"> <li> <a href="sobre_nosotros.html" style="color:black;"><b>Sobre Nosotros</b></a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" style="color:black;" aria-haspopup="true" aria-expanded="false"><b>Productos</b> <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="ropaindex.html">IMCtext</a></li> <li><a href="#">IMCplastic</a></li> <li><a href="#">IMCcontención</a></li> <li role="separator" class="divider"></li> <li><a href="#">Absorventes</a></li> </ul> </li> <li> <a href="#" style="color:black;"><b>Contacto</b></a> </li> </ul> </div> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Page Content --> <!-- carousel --> <header> </header> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for Slides --> <div class="carousel-inner"> <div class="item active"> <!-- Set the first background image using inline CSS below. --> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> <div class="carousel-caption"> <h2>Caption 1</h2> </div> </div> <div class="item"> <!-- Set the second background image using inline CSS below. --> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> <div class="carousel-caption"> <h2>Caption 2</h2> </div> </div> <div class="item"> <!-- Set the third background image using inline CSS below. --> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> <div class="carousel-caption"> <h2>Caption 3</h2> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> <!-- IMC secciones --> <div class="container" id="nuestrosclientes"> <a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a> <a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a> <a data-toggle="modal" data-target="#myModal"><img class="img-responsive" width="100%;" src="http://placehold.it/1000x200" alt=""> </a> <hr> <h1><b>Nuestros clientes</b></h1> <hr> <!-- Title --> <div class="container"> <ul class="bxslider"> <li><img src="img/clientes/14.jpg" /></li> <li><img src="img/clientes/15.jpg" /></li> <li><img src="img/clientes/16.jpg" /></li> <li><img src="img/clientes/17.jpg" /></li> <li><img src="img/clientes/18.jpg" /></li> </ul> </div> <!-- /.row --> </div> <!-- FOOTER --> <footer class="footer-distributed"> <div class="footer-left"> <div class="container"> <img class="img-responsive" src="img/logo/logosmall.jpg" alt=""> <br> <p class="footer-company-name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IMC chile &copy; 2016</p> </div> </div> <div class="footer-center"> <div> <i class="fa fa-map-marker"></i> <p style="color:black;"><span>La Senda de Don Juan Francisco 5300,</span> Peñalolén, Santiago.</p> </div> <div> <i class="fa fa-phone"></i> <p style="color:black;">+56 9 5688 6169</p> </div> <div> <i class="fa fa-envelope"></i> <p style="color:black;">ventas@imcchile.cl</p> </div> </div> <div class="footer-right"> <p style="color:black;" class="footer-company-about"> <span style="color:black;">Sobre la compañia</span> Comercializadora Importadora y Exportadora IMC Chile Limitada. <br>Rut: 76.296.444-9. </p> <div class="footer-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </footer> <!-- /.container --> <!-- jQuery --> <script src="js/jquery.js"></script> <script src="js/jquery.bxslider.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- carousel script --> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({ slideWidth: 600, minSlides: 2, maxSlides: 3, slideMargin: 10, speed: 1000 }); }); </script> </body> </html>

2 個解決方案

解決方案1
 0  2016-10-06 17:00:34

您好，嘗試下面的導航欄HTML我剛剛為引導程序編輯了一些類，它似乎可以工作。希望它對您有所幫助。 “只需忽略代碼，請參閱下面的小提琴” 。 

 <div class="collapse navbar-collapse" id="myNav">

                      <ul class="nav navbar-nav">
                          <li>
                              <a href="sobre_nosotros.html" style="color:black;"><b>Sobre Nosotros</b></a>
                          </li>

                          <li class="dropdown">

              <a class="dropdown-toggle" data-  toggle="dropdown" href="#"  
              role="button" style="color:black;" aria-haspopup="true" aria-
              expanded="false"><b>Productos</b> <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="ropaindex.html">IMCtext</a>  
                               </li>
                                <li><a href="#">IMCplastic</a></li>
                                <li><a href="#">IMCcontención</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Absorventes</a></li>
                            </ul>
                          </li>
                          <li>
                              <a href="#" style="color:black;">  
                           <b>Contacto</b></a>
                          </li>
                      </ul>                   
              </div>

見下面的小提琴

側欄小提琴

解決方案2
 0  2016-10-06 17:43:36

好吧，如果您將“ background-color: #fff到帶有“ navbar”類的導航中，您將獲得所需的結果-后面帶有顏色的文本。 但我認為問題在於您已經覆蓋了一些引導程序類，或者錯過了將一個引導類添加到html代碼中。 此外，您的下一個問題（在背景顏色之后）將是固定導航欄的位置，因此在移動設備上可以很好地看到它。 嘗試閱讀引導文檔的這一部分以獲取更多信息。

暫無
暫無

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

相關問題 Bootstrap 4導航欄不會折疊 Bootstrap 3導航欄在Firefox中無法正常折疊 Bootstrap 3.3.7導航欄折疊不起作用 Bootstrap 5導航欄按鈕折疊不起作用 Bootstrap導航欄折疊不起作用 導航欄折疊在Bootstrap中無法正常工作 Bootstrap 折疊效果無法正常工作 bootstrap 4 導航欄折疊不起作用（使用 JQuery - popper - bootstrap Bootstrap 導航欄無法正確顯示 Twitter引導程序導航欄崩潰有效，但不會返回
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM