jquery - Bootstrap 页脚菜单没有响应

Question

大家晚上好，感谢阅读我的问题。

我在使用 nottom 固定菜单时遇到了一些问题，它在全屏分辨率下工作正常，但是当我访问具有较小屏幕(如手机或平板电脑)的网站时，底部菜单没有相同的行为就像上面的菜单一样，好吧，我认为 jfiddle 比文字更有值(value):

<footer>
         <nav class="navbar navbar-inverse navbar-fixed-bottom">
              <div class="container-fluid">
                <div class="navbar-header">
                  <a class="navbar-brand" href="index.php"><img src="img/asg-it-logo.png" alt="Logo ASG IT" class="footer_logo_img"/></a>
                </div>
                <div>
                  <ul class="nav navbar-nav">
                    <li><a href="index.php">INICIO</a></li>
                    <li  class="dropdown">
                        <a href="empresa.php" class="dropdown-toggle" data-toggle="dropdown" id="EMPRESA">EMPRESA</a>
                        <ul class="dropdown-menu" aria-labelledby="EMPRESA">
                            <li><a href="empresa.php">Nuestra visión</a></li>
                            <li><a href="porque.php">Por qué nos eligen</a></li>
                            <li><a href="como.php">Cómo lo hacemos</a></li>
                        </ul>
                    </li>
                    <li><a href="servicios.php">SERVICIOS</a></li>
                    <li><a href="soluciones.php">SOLUCIONES</a></li>
                    <li><a href="clientes.php">CLIENTES</a></li>
                    <li><a href="alianzas.php">ALIANZAS</a></li>
                    <li><a href="contacto.php">CONTACTO</a></li>
                  </ul>

                  <!-- Datos fiscales aqui -->
                  <section role="Datos Fiscales">
                  <ul class="nav navbar-nav navbar-right">
                        <li><img src="http://placehold.it/50x50"></li>
                    </ul>
                    </section>
                    <!-- Fin datos fiscales -->

                </div>
              </div>
            </nav>
    </footer>

我的 Bootply 在这里 http://www.bootply.com/qkg1TjKqQs#

我的问题 ->

Answer 1

在这里，看看这个 Bootply:

Bootply

我认为这越来越接近你想要的了。

基本上，您的 navbar navbar-inverse navbar-fixed-bottom 缺少 collapse 部分，如 Bootstrap 上默认的 navbar 示例所示文档。

 <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" 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" href="index.php"><img src="img/asg-it-logo.png" alt="Logo ASG IT" class="footer_logo_img"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">
    <li><a href="index.php">INICIO</a></li>
    (...)

您可能还需要多尝试一下，但这应该将导航栏包含在响应式示例中。

希望对您有所帮助!

提示

在 Bootply 上，按紫色桌面图标可切换到代码的全屏呈现。在尝试调整浏览器窗口大小时以较小的尺寸进行预览时提供帮助。