Question

导航栏在全屏幕中正常工作，但是当我缩小窗口时，切换选项无法正确显示。

想知道是否有人知道如何解决它。

这是导航栏的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>

Answer 1

你好试试下面的导航栏的Html我刚刚编辑了一些类的bootstrap它似乎工作。希望它可以帮助你。 ＆＃34;只需忽略代码，请参阅下面的小提示＆＃34; 。

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

见下面的小提琴

Side Bar Fiddle

Answer 2

好吧，如果您添加background-color: #fff导航到类＆＃34; navbar＆＃34;，您将获得所需的结果 - 后面带有颜色的文本。但我认为问题是你已经覆盖了一些引导类或错过了在你的html代码中添加一个。此外，您的下一个问题（在背景颜色之后）将修复导航栏的位置，因此在移动设备上可以很好地查看。尝试阅读此part引导文档以获取更多信息。

Navbar在bootstrap 3

2 个答案: