不显示下拉菜单项

Question

我编写了一个下拉菜单按钮，它显示正确但没有下拉，我的源代码是这样的：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Agregar Solicitud de Soporte</title>
    <!-- Bootstrap CSS File  -->
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.css"/>
    <LINK tpe='text/css' rel='StyleSheet' href='marn.css'>
</head>
<body>
    <div class='container'>
        <div class='row'>
            <div class="col-md-6 col-md-offset-3">
                <h1 class="page-header text-center">Solicitud de Soporte Tecnico</h1>
                <form class="form-horizontan l" role="form" method="post" action "addsoporte.php">
                    <div class="form-group">
                        <label for="txtdessop" class="col-sm-2 control-label">Descripcion</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="5" name="txtdessop" 
                                placeholder="Descripcion de la Solicitud del Soporte"></textarea>
                            </div>
                    </div>

                    <div class="form-group">
                        <label for="txtmodsop" class="col-sm-2 control-label">Modulo Afectado</label>
                            <div class="col-sm-10">
                                    <button type="button" class="btn btn-default dropdown-toggle" 
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" 
                                    id="txtmodsop" >Seleccione...
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="txtmodsop">
                                        <li>Estadisticas</li>
                                        <li>Indicadores</li>
                                        <li>Inv. Estadisticas</li>
                                        <li>Metodologia</li>
                                        <li>Glosario</li>
                                        <li>Publicaciones</li>                                                                                                                                                                                                      
                                    </ul>
                            </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10 col-sm-offset-2">
                            <a href='javascript: history.go(-1)' id="cancelar" name="cancelar" class="btn btn-warning">Cancelar</a>                 
                            <input id="enviarsoporte" name="enviarsoporte" type="submit" value="Enviar" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>     
</html>

此时我没有找到问题所在，我查了很多例子，它们很像我的源代码，但还是不行。任何建议将不胜感激。祝一切顺利

Answer 1

使用 <select> 标签代替 <button>

<body>
    <div class='container'>
        <div class='row'>
            <div class="col-md-6 col-md-offset-3">
                <h1 class="page-header text-center">Solicitud de Soporte Tecnico</h1>
                <form class="form-horizontan l" role="form" method="post" action "addsoporte.php">
                    <div class="form-group">
                        <label for="txtdessop" class="col-sm-2 control-label">Descripcion</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="5" name="txtdessop" 
                                placeholder="Descripcion de la Solicitud del Soporte"></textarea>
                            </div>
                    </div>

                    <div class="form-group">
                        <label for="txtmodsop" class="col-sm-2 control-label">Modulo Afectado</label>
                            <div class="col-sm-10">

                                     <select class="form-control" id="yourTitle">
                                        <option>Estadisticas</option>
                                        <option>Indicadores</option>
                                        <option>Inv. Estadisticas</option>
                                        <option>Metodologia</option>
                                        <option>Glosario</option>
                                        <option>Publicaciones</option>
                                      </select>
                            </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10 col-sm-offset-2">
                            <a href='javascript: history.go(-1)' id="cancelar" name="cancelar" class="btn btn-warning">Cancelar</a>                 
                            <input id="enviarsoporte" name="enviarsoporte" type="submit" value="Enviar" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

Answer 2

您需要包含 bootstrap.min.js 。请添加如下脚本标签并检查。

 <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Agregar Solicitud de Soporte</title>
        <!-- Bootstrap CSS File  -->
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.css"/>
        <LINK tpe='text/css' rel='StyleSheet' href='marn.css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

Answer 3

您还需要包含 Bootstrap JavaScript 文件，下拉菜单才能正常工作。

注意底部的 JQuery 和 Bootstrap 脚本

<html>
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>
    <div class="dropdown">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Seleccione...
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>Estadisticas</li>
            <li>Indicadores</li>
            <li>Inv. Estadisticas</li>
            <li>Metodologia</li>
            <li>Glosario</li>
            <li>Publicaciones</li>
        </ul>
    </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

不显示下拉菜单项

Dropdown menu items are not displayed

dropdownbox

twitter-bootstrap

drop-down-menu