Problema con bootstrap

di Zovvo il
1 risposte

Salve a tutti,
come da titolo ho un problema con boostrap: ho realizzato un sito con un menu per il quale ho impostato una taglia al di sotto della quale dovrebbe avvenire la commutazione ed in effetti, visualizzandolo sul computer (ho uno schermo XL) le voci del menu appaiono, come dovrebbe essere, tutte affiancate mentre, quando restringo la finestra del browser al di sotto della taglia indicata nel menu, avviene la commutazione: spariscono le voci del menu e, al loro posto, appaiono le tre linette orizzontali, cliccando sulle quali il menu trasla dall'alto, visualizzando le voci una sotto l'altra; il problema è che questo non succede quando lo visializzo sul telefonino: appaiono direttamente le tre lineette orizzontali ma quando le tocco non succede niente; mi potete aiutare? di seguito posto il codice:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<style>
.verde {
   background-color:#177245;
   font-size:20px;
}
nav {
   border-radius:20px;
}
</style>
<link rel="shortcut icon" href="">
<link href="CSS/bootstrap.css" rel="stylesheet">
<script src="JS/jquery.js"></script>
<script src="JS/popper.js"></script>
<script src="JS/bootstrap.min.js"></script> 
</head>
<body>
<!--   inserisco il menu      -->
<div class="container-fluid ml-4 mt-2">
   <div class="col-md-10">
       <nav class="navbar navbar-expand-md navbar-dark verde ml-5">
           <div class="container">
               <a class="navbar-brand" href=""></a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu">
                   <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="mainmenu">
                   <ul class="navbar-nav">
                       <li class="nav-item active"><a href="home.php" class="nav-link">Home</a></li>
                       <li class="nav-item active"><a href="formaz.php" class="nav-link">Formazione</a></li>
                       <li class="nav-item active"><a href="attivita.php" class="nav-link">Attività svolta</a></li>
                       <li class="nav-item active"><a href="pubblicaz.php" class="nav-link">Pubblicazioni</a></li>
                       <li class="nav-item active"><a href="" class="nav-link">Galleria fotografica</a></li>
                       <li class="nav-item active"><a href="form.php" class="nav-link">Contatti</a></li>
                    </ul>  
                         <ul class="navbar-nav ml-auto">
                       <li class="nav-item active dropdown">
                           <a class="nav-link" href="">Vai al Guestbook</a>
                       </li>
                    </ul>
               </div>
           </div>
       </nav>
   </div>
</div>
</body>
</html>

Vi ringrazio

Z

1 Risposte

  • Quel div con .col-md-10 dovrebbe stare dentro un div con classe .row

    La regola è che i .col stanno dentro .row

    Prova a prendere l'esempio HTML base di bootstrap con menù e parti da lì con la costumizzazione 

Devi accedere o registrarti per scrivere nel forum
1 risposte