[Bootstrap] navbar nel container va comunque al 100% di larghezza schermo

**Gas75** · 25-05-2019, 11:44

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...

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

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:

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;
    }


}

**graffithouse** · 26-05-2019, 23:11

Basta togliere fixed-top dal codice

codice HTML:

body>
    <div class="container">
        <nav class="navbar navbar-light navbar-expand-lg fixed-top">

Discussione: [Bootstrap] navbar nel container va comunque al 100% di larghezza schermo

Strumenti discussione

Ricerca discussione

Visualizza

[Bootstrap] navbar nel container va comunque al 100% di larghezza schermo

Tag per questa discussione

Permessi di invio