Problema con bootstrap

di Zovvo il
3 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

3 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 customizzazione 

  • 12/08/2026 - Toki ha scritto:

    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 customizzazione 

    Ciao Toki,
    intanto grazie per la risposta; più tardi proverò a fare come dici e ti farò sapere

    Z

  • Ciao Toki,
    ho fatto come mi hai suggerito ma, purtroppo, senza risultati; oltretutto, a mio avviso, non è tanto un problema di codice, perché altrimenti non funzionerebbe nemmeno sul computer, quanto di librerie importate (popper, jQuery); cmq ho ovviato in altro modo: il 70-80% delle persone visualizza sul tefonino quindi ho creato un menu che visualizza direttamente l'hamburger menu (le tre lineette orizzontali) e quando l'utente ci clicca sopra viene richiamato uno script jQuery che fa traslare il menu verso il basso facendo apparire le voci una sotto l'altra; grazie cmq per l'interessamento. A presto

    Z

Devi accedere o registrarti per scrivere nel forum
3 risposte