Salve, vorrei realizzare un layout con Bootstrap dove la navbar sia contenuta nella larghezza del container, quindi inserisco il blocco nav dentro il div container, ma la navbar resta al 100% di larghezza come se fosse fuori dal container.
L'unico modo per contenere la navbar nel container è toglierle la classe fixed-top, che invece intendo tenere.
Codice che dovrebbe funzionare...
Questo è il foglio di stile personalizzato (codici dei colori provvisori), caricato in codice dopo i link a bootstrap, dove presumo ci sia qualche inghippo che però non trovo...codice HTML:<body> <div class="container"> <nav class="navbar navbar-light navbar-expand-lg fixed-top"> <a class="navbar-brand" href="index.php"><img src="img/banner.gif" alt="Descrizione sito"></a> // codice della navbar </nav> <div id="main"> // resto del codice della pagina
codice:body { background-color: #0000a0; font-family: Arial, Verdana, Helvetica; color: #eee; } .container { background-color: #242424; border: 0px; } nav { background-color: #ffff80; z-index: 1; } .navbar-light .navbar-nav .nav-link { color: #077d31; text-decoration: none; font-weight: bold; } a { color: #888; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } a:hover { color: #aaa; text-decoration: none; } :target:before { content: ""; display: block; height: 62px; margin: -62px 0 0; } .navbar-brand { font-size: 30px; font-weight: bold; } #main { margin-top: 81px; background-color: #242424; } h1 { margin-top: 10px; font-size: 24px; font-weight: bold; text-align: center; background-color: #aaa; color: #141414; } h2 { margin-top: 10px; font-size: 20px; font-weight: bold; text-align: center; background-color: #aaa; color: #141414; } .row { background-color: #141414; } .foto { margin: 0px auto; padding: 8px; display: block; } #foto img { max-width: 100%; } .dida { font-style: italic; font-size: 12px; text-align: center; } p { text-align: justify; } #altervista { text-align: center; background-color: #141414; } .stat { text-align: center; margin: 0px auto; } #spazio { height: 10px; background-color: #242424; } footer { text-align: center; } .footertx { margin-top: 8px; } .modulo { padding: 2px 0px; } img.social { margin-top: 5px; } @media only screen and (max-width: 575px) { .counter { margin-top: 5px; } }

Rispondi quotando
