5 colonne con bootstrap 2

Fabio90 · 28 Feb 2015

Buonasera a tutti,
Utilizzando questo codice bootstrap2 mi genera

HTML:

    <div class="span2 offset1"><img></div>
    <div class="span2"><img></div>
    <div class="span2"><img></div>
    <div class="span2"><img></div>
    <div class="span2"><img></div>

Come posso fare per avere 5 colonne che occupano tutto lo spazio come in questo allegato?

Grazie!

filomeni · 3 Mar 2015

Ciao, prova una soluzione del genere, ovvio il mio è un esempio che devi conformare...

HTML:

    <html>
        <head>
		<style>
		#livello1{border: 2px solid;position: relative;width: 1025px;height: 115px;left: 10px;top: 15px;background-color: rgb(255, 255, 0);}
		#livello2{border: medium solid;width: 192px;height: 100px;float: left;right: 200px;margin-left: 5px;margin-top: 5px;background-color: #F00;}
		#livello3{border: medium solid;width: 192px;height: 100px;left: 415px;top: 5px;position: absolute;background-color: #0FFF00;}
		#livello4{border: medium solid;position: relative;width: 192px;height: 100px;left: 210px;top: 5px;background-color: #0042FF;}
		#livello5{border: medium solid;position: absolute;width: 192px;height: 100px;left: 620px;top: 5px;background-color: #F900FF;}
		#livello6{border: medium solid;position: absolute;width: 192px;height: 100px;left: 825px;top: 5px;background-color: #0B6B6B;}
		</style>
		</head>
        <body>
            <div id="livello1">
                <div id="livello2">Img1</div>
                <div id="livello3">Img2</div>
                <div id="livello4">Img3</div>
                <div id="livello5">Img4</div>
                <div id="livello6">Img5</div>
            </div>
        </body>
    </html>

Soulfearor · 6 Mar 2015

Non puoi creare 5 colonne che io sappia in quanto bootstrap si basa su un valore 12 e 12 non è divisibile per 5.
Nel tuo esempio c'è:
offset 1 + colonna 2 + colonna 2 + colonna 2 + colonna 2 + colonna 2 + uno spazio di 1 in questo caso, generato in automatico in quanto la somma delle colonne che hai definito fa 11 e non 12 tenendo conto dell'offset.

Prova manualmente es:
HTML

Codice:

<div id=contenitore">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

CSS

Codice:

#contenitore {
width:1200px;
}

.col {
width:20%;
display:block;
flat:left;
}

Ciau!

filomeni · 7 Mar 2015

Ciao, Per il discorso di Bootstrap non so risponderti non è cosa che uso. Comunque il mio voleva essere un puro esempio di suddivisione per gli spazi, non testato con il "sistema" suddetto.
Il tuo esempio, anche se ha un paio di errori, è sicuramente più fluido ma comunque errato in quanto usi:

Codice:

display:block;

e nel caso di Fabio90 bisogna usare:

Codice:

display:inline;

Credo che la soluzione l'hai data, in questa maniera Fabio90 dovrà gestire solo "width" del contenitore e "width" delle colonne.
Ciao

Soulfearor · 7 Mar 2015

Ho sempre usato display:block; per varie comodità ma terrò sicuramente in considerazione quello che hai scritto.
Grazie filomeni ^^ Buona giornata

Cerca

Cerca

5 colonne con bootstrap 2

Fabio90

Utente Attivo

filomeni

Moderatore

Soulfearor

Utente Attivo

filomeni

Moderatore

Soulfearor

Utente Attivo

Discussioni simili