Question

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

我有一些bootstrap的问题，有一个nottom修复菜单，它可以在全屏分辨率下正常工作，但是当我使用较小的屏幕（如手机或平板电脑）访问网站时，底部菜单没有相同的行为就像上面的菜单一样，我认为jfiddle比单词更值得：

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

我的问题 - ＆gt; enter image description here

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上，按紫色桌面图标切换到代码的全屏渲染。在尝试调整浏览器窗口大小以便以较小的尺寸预览时有帮助。

bootstrap页脚菜单没有响应

1 个答案: