Question

当我使用我的大屏幕进入PC模式时，我的菜单是使用Bootstrap创建的，正确显示没有任何问题。但是，当我将浏览器缩小到移动视图并单击右上角的菜单时，我的菜单组件不会出现。

以下是观点：

普通模式：

Normal mode

在移动模式下：

图1：

mobile mode

图2：

mobile mode 2

如您所见，菜单内容已消失。我的剧本：

<!DOCTYPE html>

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">



<h:head>

    <title>Site FRC</title>

    <meta charset="utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <h:outputStylesheet library="css" name="styles.css"></h:outputStylesheet>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

    <style type="text/css">

        body {
            background-color: #aaa;
            padding-top: 10px;
        }

        [class*="col-"] {
            margin-bottom: 20px;
        }


        .well {
            background-color: #CCC;
            padding: 20px;
        }

        a:active, a:focus {
            outline: none;
        }

        .inline-form input {
            display: inline-block;
            width: 100px;
        }



    </style>


</h:head>

<h:body>


    <div class="container">

    <ui:include src="/template/common/commonHeader.xhtml" />


        <div class="alert alert-warning alert-dismissable col-lg-6">
            <button type="button" class="close" data-dismiss="alert">&#215;</button>
            <strong>Information : </strong> Le site web est toujours en cours de
            développement
        </div>


        <br /> <br /><br /> <br /><br />




        <p:chart type="bar" model="#{chartView.barModel}" style="height:300px" />

        <p:chart type="bar" model="#{chartView.horizontalBarModel}"
                    style="height:300px" />




        <br/> <br/><br/>





    <ui:include src="/template/common/commonFooter.xhtml" /> 



    </div>


    <h:outputScript name = "/js/bootstrap.js" /> 
    <h:outputScript name = "/js/bootstrap..min.js" /> 




</h:body>

</html>

这里编辑的是我的菜单脚本：

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>


    <meta charset="utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1"/>



</h:head>

<h:body>

<ui:composition>

<!--Menu déroulant-->


      <nav class="navbar navbar-inverse" role="navigation">   
        <div class="navbar-header">   
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.xhtml">FRC</a>
        </div>



        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav">

            <li> <a href="index.xhtml">Accueil</a> </li>

            <li class="dropdown"> 
              <a data-toggle="dropdown" href="#">Tableaux de données <b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li class="dropdown-header">Consultation</li>          
              <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span> Tout consulter</a></li>
              <li><a href="tableauxFiltrage.xhtml"><span class="glyphicon glyphicon-screenshot"></span> Par filtrage</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Exporter</li>
              <li><a href="ExporterDonnee.xhtml"><span class="glyphicon glyphicon-list-alt"></span> Exporter les données</a></li>
              </ul>
            </li> 

            <li class="dropdown"> 
              <a data-toggle="dropdown" href="#">Graphiques <b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li class="dropdown-header"> Génerale</li>
              <li><a href="graphiqueEvolution.xhtml"><span class="glyphicon glyphicon-screenshot"></span> Evolution</a></li>
              <li class="divider"></li>
              <li class="dropdown-header"> Autres</li>
              <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Autres</a></li>
              </ul>
            </li> 

            <li> <a href="#">Contact</a> </li>

          </ul>

          <h:form class="navbar-form navbar-right inline-form" role="form">
            <div class="form-group">
              <h:inputText id="search" value ="" class="input-sm form-control" placeholder="Recherche"></h:inputText>
              <h:commandButton  value="Rechercher" onclick = "alert('Hello World!');"  class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</h:commandButton>
            </div>
          </h:form>

        </div>
      </nav>


<!--Menu déroulant-->

</ui:composition>



</h:body>
</html>

Answer 1

这只是bootstrap移动菜单的模式。当您单击替换菜单的sqare时，如果您正确应用了脚本，则会出现菜单。就像那样。

见上面的链接： https://www.youtube.com/watch?v=qpWlaOeGZ_4

Answer 2

编辑：我的抱怨，我以为你在抱怨按钮。

好的，您可能没有show属性。

在导航项目所在的CSS中，添加此

.collapse.show { display: block; }

这可能有效

Answer 3

如果您了解在小屏幕中消失的引导菜单的行为，并在单击时变成小方块显示菜单。在为小屏幕调整大小浏览器后，查看是否有一些透明div或其他html元素覆盖您的菜单。如果你有一些HTML元素覆盖它，它会阻止你点击菜单。

Bootstrap下拉菜单在移动模式下不可见

3 个答案: