Navbar Bootstrap a tutta larghezza

[lessicoitaliano]

Buon pomeriggio alla platea dei maestri sviluppatori.

Sto realizzando con Bootstrap la nuova testata del sito (nell’immagine), sito che dovrà essere pienamente responsive e mobile-friendly.



Ho generato una barra di navigazione utilizzandolo lo script presente nella guida Bootstrap e il css standard di Bootstrap. La navbar, come da standard, occupa solo una parte dell’estensione orizzontale del contenitore ed è allineata a sinistra.

Io vorrei che:

la serie dei pulsanti dropdown (menù a tendina) si estendesse per l’intera larghezza della barra, qualunque sia il viewport. Dal momento che la barra comprende 6 pulsanti, penserei di assegnare a ciascuno di essi una larghezza di 100/6 = 16,6666%.

Dovrei dunque definire per essi una classe ad hoc ma, al momento, non sono ancora riuscito a individuare su quale elemento HTML/css (contenitore? Lista? Elemento della lista? Button?) dovrei intervenire, applicando questa nuova classe.

Ringrazio chiunque voglia provare ad aiutarmi.

Lessico

P.S.: Se occorrono ulteriori elementi vi prego di dirmelo.

[M4V1]

Da quello che vedo dall'immagine direi che sei a buon punto, probabilmente devi solo settare la width della classe .navbar-nav a 100%. A quel punto puoi controllare il posizionamento dei tuoi pulsanti tramite la direttiva justify-content, sempre su .navbar-nav.

Bootstrap ha anche delle apposite classi che puoi utilizzare, se vuoi leggi qui: https://getbootstrap.com/docs/4.0/ut...ustify-content

Io non so che versione di bootstrap usi, io mi riferisco alla 4.

p.s. questo post è più da sezione HTML che CMS.

[lessicoitaliano]

Buongiorno M4V1,

grazie per l'incoraggiamento, veramente importante per me che sto affrontando questo progetto sulla scorta di una preparazione fatta di manuali letti, ma di poca o nessuna esperienza sul campo. Proverò a fare buon uso dei tuoi suggerimenti e non mancherò di farti sapere se sarò riuscito a portare l'imprese a buon fine.

Ho cominciato a lavorare con BS 3 (come da Guida HTML.it), poi mi sono reso conto che la versione attualmente rilasciata è la 4. Tuttavia non credo che cambi molto...

Riguardo al post-scriptum: la penso come te, ma in un altro forum la stessa discussione mi è stata spostata dall'amministratore nella sezione CMS...

Saluti, lessico

[M4V1]

Purtroppo invece dalla versione 3 alla 4 cambiano molte cose e quello che ti ho scritto non va bene per bootstrap 3.

Ora purtroppo non mi ricordo bene come si faceva una cosa del genere sul 3, ma mi sembra che non si possa fare in modo che gli elementi del menu vengano "giustificati" automaticamente.

La cosa più veloce che mi viene in mente è impostare questi valori sullla classe .navbar-nav

display: flex;
float: none;
justify-content: space-between;

In questo modo riporti la nav ad un comportamento simile a quello di bootstrap 4.
Sono andato un po' a braccio quindi non è detto che funzioni, scusami ma come ti ho detto non mi ricordo bene come funziona bootstrap 3.

[lessicoitaliano]

Buon pomeriggio.

Qual è il problema? Quel top pagina che hai visto è stato scritto tutto da me, l'unico elemento Bootstrap e la navbar. Per passare a BS4 mi basta sostituire le librerie... il download dura un attimo.

Passo a quattro e ti faccio sapere. Intanto vedi che ti ho mandato un msg. privato...

Grazie, a presto.

[lessicoitaliano]

Riemergo dalla mia spedizione sul pianeta Bootstrap.

Ho installato la versione 4 e provato a convertire la header realizzata con BS 3, perfettamente funzionante e ridimensionabile, come si vede dall’immagine, utilizzando la nuova versione. Risultato: il resizing spinto non funziona (scompaiono i pulsanti della navbar – seconda immagine). Da sottolineare che, senza ridimensionare la pagina o impicciolendola di poco, la header funziona perfettamente, e la navbar mostra i suoi contenuti.
Potrebbe dipendere dal fatto (chiedo la tua opinione e quella di chi legge) che il file grid.css non viene scaricato con il download… Tuttavia, nella pagina, è presente un link al sito Bootstrap.com.

Immergendomi in una ricerca sul tema, ho appreso che attualmente la 4 è una versione beta del framework e verificato che, di fatto, non esiste una documentazione ufficiale esaustiva sullo sviluppo di progetti-tipo.

A questo punto viene da chiedersi, dovendo sviluppare un sito di supporto a un’attività produttiva già in corso, che senso abbia affidarne la realizzazione a un tool in versione beta, che a tutt’oggi non garantisce ancora nulla. Non c’è dubbio che la versione 4 sarà il futuro, ma io debbo operare nel presente, e BS 3 ha dimostrato di funzionare, seppur con qualche limite grafico.

Cosa ne pensa questo onorevole forum?

Resizing-BS3.JPG
Resizing-BS4.JPG