堆栈内存溢出
  繁体   English   中英

引导程序3中的Navbar无法正常折叠

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

 原文  2016-10-06 16:21:31  7   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