problema allineamento in percentuale

[pegaso22]

Ciao a tutti,
non capisco perchè se imposto un div al 25% e ne affianco 4 il 4° va a capo.
Sono ore che sto cercando una soluzione ma non la trovo.

ecco un codice semplicissimo

<div class="col-xs-12 col-sm-12 col-md-12" style="background-color: #F5F5F5;">
   <div class="col-sm-2 col-md-2" style="margin:0; padding:0;"></div>
   <div class="col-xs-12 col-sm-8 col-md-8" style="margin:0; padding:0;">
      <div class="sottohome">
         a
      </div>
      <div class="sottohome">
         b
      </div>
      <div class="sottohome">
         c
      </div>
      <div class="sottohome">
         d
      </div>
   </div>
   <div class="col-sm-2 col-md-2" style="margin:0; padding:0;"></div>
</div>

    .sottohome {
    width: 25%;
    display: inline-block;
    background-color: #ff0000;
    padding: 0px;
    border: 0px;
    margin: 0px;
    }

che c'è che non va?
E' normale che al 25% non affianchi i 4 div?

Fatemi sapere, grazie mille.

[Roby140569]

Stai lavorando con Bootstrap, almeno così sembra perché vedo questo: class="col-xs-12 col-sm-12 col-md-12".

Hai letto come funziona la griglia in bootstap? Ti consiglio di farlo e scoprirai come semplificarti un sacco di cose.

In quel tuo codice, al posto di class="sottohome", in quei div, metti class="col-xs-3 col-sm-3 col-md-3 col-lg-3" e vedrai che i 4 div saranno allineati in una riga sola.

Poi dovrai pensare come impostare la visualizzazione su schermi piccoli e modificare la classe che ti ho dato, tipo class="col-xs-12 col-sm-6 col-md-3 col-lg-3", cioè, 4 per gli schermi "medi" e "grandi", 2 per quelli piccoli ed uno solo per quelli xs.

Perché tutto quel codice inline?

[pegaso22]

Grazie mille per la risposta.
Purtroppo e una prova che ho già fatto ma non mi da ciò che desidero.

Praticamente io dovrei impostare così:
su smart phone i 4 div vanno a capo (quindi xs-12) e va bene
su tablet i div devono essere allineati ma con le griglie bootstrap non ho una impostazione che mi calcola la misura tablet.
Quindi se imposto xs-12 sm-3 md-3 sul tablet mi prende xs e quindi manda tutto a capo e non è la soluzione che vorrei.
Quindi questo mi ha spinto a creare una nuova classe dove stavo cercando di impostare tutto al 25% per le risoluzioni superiori a 323px.

@media (min-width: 323px) { ... }

Si può fare?
Sto ragionando male io?

[Roby140569]

Per i miei progetti dove uso Bootstrap, aggiungo questo, in modo da avere la possibilità di avere due colonne ed una, anche per schermi piccoli.

@media (max-width: 400px) 

.col-xxs-6 {
   width: 50%;
}

.col-xxs-12 {
   width: 100%;
} 

[pegaso22]

praticamente è lo stesso fatto da me...
.sottohome {
width:25%;
...

ma non va, sicuramente sto sbagliando io qualcosa.

[Roby140569]

praticamente è lo stesso fatto da me...
.sottohome {
width:25%;
...

ma non va, sicuramente sto sbagliando io qualcosa.

Nel mio codice ci sono le impostazioni per avere, negli schermi piccoli, una o due colonne.

Se tu mi parli di 4 colonne, siamo nella versione desktop o al limite tablet in orizzontale e non serve l'integrazione al CSS.

E' possibile vedere quello che hai fatto? Hai un link da postare?

[pegaso22]

mi sfugge il perchè ma ora ho visto il codice di un altra pagina dove ho risolto lo stesso problema impostando:
margin-right: -4px;

Così tutti e 4 sono in linea...

[pegaso22]

Quello che ho fatto è semplicemente quello che ho postato su, un semplice affiancamento di 4 div nella risoluzione superiore ai 323px

Impostando margin-right: -4px; va tutto bene

[Roby140569]

Bene se hai risolto, anche se sarebbe sempre meglio, per te, capire il perché...

Se posso permettermi di darti un consiglio, cerca di pulire quel codice.

Per esempio, lo stile inline potresti toglierlo, a favore di un'aggiunta in class.
Questo:

<div class="col-xs-12 col-sm-8 col-md-8" style="margin:0; padding:0;"> 

Diventerebbe:

<div class="col-xs-12 col-sm-8 col-md-8 miaclasse">

<style>
.miaclasse{
  margin:0;
  padding:0;
}
</style>