Visualizzazione dei risultati da 1 a 1 su 1
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2003
    residenza
    Prato
    Messaggi
    669

    Inserire uno spazio fra le colonne dei div

    Sto creando un layout responsive ma ho un paio di problemi di visualizzazione.
    Invio le immagini così capite meglio:
    1.jpg
    2.jpg

    Praticamente vorrei che fra le varie colonne ci sia un po' di spazio e che quando si passa alla visione tablet le due colonne siano centrate e non allineate a sinistra!

    Questo è il mio codice. Uso bootstrap:

    codice HTML:
    <div class="container py-0">             
    <center>         
    <div class="container pb-2 pt-3 px-3">             
    <div class="row mx-md-n2">                 
    <div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">                      
    <div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>                 
    <div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">                     
    <div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>                 
    <div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">                     
    <div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>                 
    <div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">                    
    <div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>                 
    <div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">                     
    <div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>                 
    <div class="border border-secondary shadow-sm p-0 mb-2 bg-muted rounded-lg col-xs-12 col-sm-12 col-md-5 col-lg-2">                     
    <div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight-bold">Titolo</div><img src="images/occhio-di-gatto.jpg" class="flex"><div class="pb-0 pt-0 px-0 py-0 bg-warning font-italic text-black font-weight">Riassunto</div></div>             
    </div>                
    </div>         
    </center>         
    </div>
    Ultima modifica di Artgallery75; 15-07-2020 a 11:40

Tag per questa discussione

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 © 2020 vBulletin Solutions, Inc. All rights reserved.