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

    Card bootstrap con colonne a 6

    Ho trovato questo codice bootstrap che farebbe al caso mio ma ha un problema si stringe se le colonne aumentano.
    Io vorrei che dopo 6 colonne le altre andassero a capo.

    Si può fare in qualche modo?

    Devo integrare questo codice nel mio tema wordpress fatto da 0!

    codice HTML:
    <div class="card-deck"> 
     
    <div class="card">    
    <img class="card-img-top" src="..." alt="Card image cap">    
    <div class="card-body">      
    <h5 class="card-title">Card title</h5>      
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>    
    </div>    
    <div class="card-footer">      
    <small class="text-muted">Last updated 3 mins ago</small></div>  
    </div>  
    
    <div class="card">    
    <img class="card-img-top" src="..." alt="Card image cap">    
    <div class="card-body">      <h5 class="card-title">Card title</h5>      
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>    </div>    
    <div class="card-footer">      
    <small class="text-muted">Last updated 3 mins ago</small>    </div>  
    </div>  
    
    <div class="card"> 
    <img class="card-img-top" src="..." alt="Card image cap">    
    <div class="card-body">      
    <h5 class="card-title">Card title</h5>      
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>    </div>  
      <div class="card-footer">      
    <small class="text-muted">Last updated 3 mins ago</small>    
    </div>  </div>
    
    </div>
    Ultima modifica di Artgallery75; 23-12-2020 a 13:40

  2. #2
    Inserisci il codice delle card all'interno di una griglia

    codice:
    <div class="row">
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
    </div>

  3. #3
    Utente di HTML.it
    Registrato dal
    Mar 2003
    residenza
    Prato
    Messaggi
    687
    Ho capito ma io lo devo mettere in wordpress in un qualcosa di dinamico che fa ruotare gli articoli nella home page quindi di questo codice deve rimanere solo questo:
    <div class="row">
    <div class="col-2"> <!-- codice card --></div>
    </div>

    Quote Originariamente inviata da graffithouse Visualizza il messaggio
    Inserisci il codice delle card all'interno di una griglia

    codice:
    <div class="row">
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
        <div class="col-2"> <!-- codice card --></div>
    </div>

  4. #4
    all'esterno del loop metti i codici per il container

    codice:
    <div class="container"> 
    <div class="row">
    all'interno del loop invece inserisci il codice delle colonne

    codice:
    <div class="col-sm-4 col-md-2 ecc..."> <!-- codicew card --> </div>
    e dopo il loop chiudi i tag
    codice:
    </div>
    </div>

  5. #5
    Utente di HTML.it
    Registrato dal
    Mar 2003
    residenza
    Prato
    Messaggi
    687
    Ho risolto usando il vecchio codice mettendo questo stile:

    codice HTML:
    Style="min-height: 130px;"
    Ma ti ringrazio lo stesso

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