/ / Aggiunta della navigazione nel piccolo schermo di bootstrap 3 - css, twitter-bootstrap-3

Attacca la navigazione nel piccolo schermo di bootstrap 3 - css, twitter-bootstrap-3

Sto cercando di giocare in Bootstrap 3duplica la barra di navigazione verticale utilizzata nel sito getbootstrap. Sto incontrando un paio di problemi però e non sto trovando un sacco di documentazione su cui lavorare.

Ecco un link bootply per mostrarti da dove vengo: http://bootply.com/77832

Il problema numero 1 è che se cambio lo schermola dimensione da grande a piccola, la mia navigazione è ora sotto il mio testo. Ma sul sito di bootstrap la navigazione si sposta in cima allo schermo e il testo rientra in quello. Come posso fissare la reattività di questo in modo che il ridimensionamento o la visualizzazione su uno schermo piccolo non rovini il layout?

Il numero 2 è cosmetico. Mi piacerebbe per lo sfondo abbastanza rosa della mia navigazione per riempire l'intero contenitore piuttosto che solo la larghezza del testo, quindi ho pensato, hey, gettare una larghezza: 100% su quel ragazzaccio e tutto è pronto. Ho pensato che avrebbe riempito il 100% del col-md-3 che lo contiene, ma in realtà riempie il 100% della larghezza dello schermo. Perché dovrebbe estendersi dal col-md-3 in cui si trova e come posso ottenere l'aspetto desiderato?

risposte:

1 per risposta № 1

Per il n. 2, il problema è che l'UL ha una posizione:risolto, quindi "rimuove" se stesso dalla conoscenza della larghezza del suo genitore, in sostanza tratta il corpo come genitore, quindi larghezza: 100% lo renderà largo quanto la pagina.

Per il n. 1, potresti voler guardare, quando la pagina diventa piccola, rendere il nav "non apposto" sul lato della pagina.