Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2014
    Messaggi
    47

    Tre immagini centrate e affiancate responsive con bootstrap

    Come da titolo, sto continuando a studiare come si fa con bootstrap a d affiancare e centrare rispetto alla pagina 3 immagini e fare in modo che si mettano una sotto l'altra quando si stringe?

    riesco a farlo solo con immagini allineate verso destra non al centro...

  2. #2
    Utente di HTML.it
    Registrato dal
    Nov 2014
    Messaggi
    47
    ho preparato un jsfiddle.... https://jsfiddle.net/udxvcwmn/

    così viene bene, solo che vorrei avvicinare di più le immagini laterali al centro... consigli?

  3. #3
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    Io sinceramente non amo bootstrap. Troppa sovrastruttura per i miei gusti. Comunque, un po' risolvi giocando con i padding di quella classe "col-xs-4" ma siccome è meglio non andare a toccare le classi di bootstrap, io vedo che lui usa la classe doppia e la seconda classe non mi sembra abbia regole. Per cui io farei:

    codice:
    .col-xs-4.c {
    padding:0}
    
    .col-xs-4.l {
    padding-right:0}
    
    .col-xs-4.r {
    padding-left:0}
    e magari taglia le immagini perchè hanno troppo spazio vuoto attorno.

  4. #4
    Utente di HTML.it L'avatar di Fidelitymyapp
    Registrato dal
    Jan 2016
    residenza
    Milano
    Messaggi
    20
    Buongiorno slerosa,

    sono d'accordo con "Resian". E' consigliabile non modificare le classi di bootstrap a meno che non si sappia cosa si stia facendo.

    Ti darei anche un'altra alternativa oltre a quella già descritta da Resian; al posto di utilizzare la classe .col-xs puoi utilizzare la classe .col-sm-4.

    Quindi avrai il tuo <div> con width 100% più altri 3 div con classe .col-sm-4. In ogniuno di essi potrai inserire una delle tue immagini.

    Spero di esserti stato utile
    Fidelity My App
    www.fidelitymyapp.it - La tua app a soli € 29,90 al mese - PROVALA GRATIS

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.