944 messaggi dal 11 febbraio 2013
ciao
posto qui anche se non riguarda asp.net core

volevo sapere quale trucchetto usare per avere le immagini con responsive anche quando gli elementi sono sotto
al numero di colonne
Ho raggruppato un array in gruppi da 3 oggetti
<template>
  <div>
    <div v-for="(divisions, i) in groupedDivisions" :key="i" class="row">
      <div v-for="(division, k) in divisions" :key="k" class="col-md">
        {{division}}
         <img :src="`../assets/images/${division}.png`" class="img-thumbnail"  />
      </div>
    </div>   
  </div>
</template>


quando l'ultima riga ha sotto ai 3 elementi le immagini sono piu grandi perchè non raggiungo la somma di 12

Non vorrei usare display flex oppure grid ma vorrei rimanere con bootstrap

grazie
Modificato da jjchuck il 28 febbraio 2019 14:46 -
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao, credo che non dovresti affatto raggruppare. Ti basta creare una singola div con class="row" e poi all'interno metti una div per elemento a cui dai la classe "col-md-4".
Ecco un fiddle in cui ci sono 4 elementi con classe "col-md-4". Come vedi il quarto elemento va a capo.
https://jsfiddle.net/w3kjbsy5/3/

E quando ne hai meno di 3, non si espandono ma ciascuno di essi continuerà a occupare 4 spazi su 12.
https://jsfiddle.net/w3kjbsy5/2/

ciao,
Moreno

Enjoy learning and just keep making
944 messaggi dal 11 febbraio 2013
cavolo hai ragione...
non mi sorprende

quello che mi sorprende è che nella documentazione dice di avere una 'row' per ogni 12 elementi

questo è meglio di ...
<div class="row">   
      <div v-for="(division, k) in divisions" :key="k" class="col-md-4">
        {{division}}
         <img :src="`../assets/images/${division}.png`" class="img-thumbnail"  />
    </div>

questo:
<div class="grid-container">  
    <div v-for="(division, i) in divisions" :key="i">
        {{division}}
        <img :src="`../assets/images/${division}.png`" 
             @click="viewProducts(division)"  />
    </div> 
  </div>

.grid-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 30px;
   }


almeno credo

ciao e grazie
11.886 messaggi dal 09 febbraio 2002
Contributi

quello che mi sorprende è che nella documentazione dice di avere una 'row' per ogni 12 elementi

Puoi citare il passaggio preciso in cui lo dice?
ciao,
Moreno

Enjoy learning and just keep making
944 messaggi dal 11 febbraio 2013
Non precisamente

Però nel primo esempio usa un div con row e poi le colonne.

Rows are wrappers for columns.

Forse ho dedotto male?
11.886 messaggi dal 09 febbraio 2002
Contributi

Però nel primo esempio usa un div con row e poi le colonne.
Rows are wrappers for columns.

Questo va bene. E' corretto avere una <div class="row"> e poi dentro le div per le colonne. Però dove dice che una row può contenere SOLO un'ammontare di 12 unità?
Oltretutto le colonne verranno visualizzate affiancate solo su schermi di media dimensione in su. Quando vai su mobile, verranno visualizzate l'una sotto l'altra quindi ogni riga può essere composta di 3, 2, o 1 colonna in base alla risoluzione.

ciao,
Moreno
Modificato da BrightSoul il 28 febbraio 2019 23:24 -

Enjoy learning and just keep making
944 messaggi dal 11 febbraio 2013
Si ho capito male:
https://medium.com/wdstack/bootstrap-exceed-12-columns-in-a-row-b551eeddf62b

Sorry
11.886 messaggi dal 09 febbraio 2002
Contributi
Nessun problema. Anzi, bravo perché hai verificato la cosa su altre fonti.

Enjoy learning and just keep making

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.