Portare CSS3 bootstrap da 3 colonne a 5 colonne

[Artgallery75]

Salve
Ho un layout già pronto di bootstrap è impostato a 3 colonne però io vorrei che diventassero 5.
Ho provato ad aggiungere 2 div ma quelli nuovi me li butta a capo.
Sicuramente ci sono dei margini da aggiustare ma non riesco a trovarli.

Potete per favore darmi una mano?

Questo è il codice:

 <!-- Projects Row -->        <div class="row">            <div class="col-md-4 portfolio-item">                <a href="#">                    <img class="img-responsive" src="images/images1.jpg" alt="Luxury Ready Goods in Season" width="200" height="180" style="border: 1px solid #000000; padding: 1">                </a>            </div>            <div class="col-md-4 portfolio-item">                <a href="#">                    <img class="img-responsive" src="images/images2.jpg" alt="Luxury Preorders" width="200" height="180" style="border: 1px solid #000000; padding: 1">                </a>            </div>            <div class="col-md-4 portfolio-item">                <a href="#">                                        <img class="img-responsive" src="images/images1.jpg" alt="Luxury Ready Goods in Season" width="200" height="180" style="border: 1px solid #000000; padding: 1">                </a>            </div>            <div class="col-md-4 portfolio-item">                <a href="#">                    <img class="img-responsive" src="images/images2.jpg" alt="Luxury Preorders" width="200" height="180" style="border: 1px solid #000000; padding: 1">                </a>            </div>            <div class="col-md-4 portfolio-item">                <a href="#">                                        <img class="img-responsive" src="images/images1.jpg" alt="Luxury Ready Goods in Season" width="200" height="180" style="border: 1px solid #000000; padding: 1">                </a>            </div>        </div>        <!-- /.row -->

Questo è quello che mi succede:

colonne.jpg

Thaks

[m4rko80]

Ciao, bootstrap suddvide il layout fino ad un massimo di 12 colonne.
Ora le hai impostate a 4 e pertanto 4+4+4 fanno 12 e poi va a capo!
Quindi dovresti secondo me adattare un sistema da 6 colonne per avere un numero pari oppure ne avanzerebbe sempre 1 e andrebbe a capo.

Se proprio ne vuoi mettere 5 centrare il tutto devi giocare appunto coi contenitori. Qui puoi vedere come lavora bootstrap per gestire le colonne/righe.
Ci sono anche diverse regole per spostare le colonne di N posizioni nel caso servisse.

[MiWebDesign]

Prova così

<div class="row">
    <div class="col-md-2 col-md-offset-1 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images1.jpg" alt="Luxury Ready Goods in Season" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
    <div class="col-md-2 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images2.jpg" alt="Luxury Preorders" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
    <div class="col-md-2 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images1.jpg" alt="Luxury Ready Goods in Season" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
    <div class="col-md-2 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images2.jpg" alt="Luxury Preorders" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
    <div class="col-md-2 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images1.jpg" alt="Luxury Ready Goods in Season" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
</div>

[cassano]

Prova così

<div class="row">
    <div class="col-md-2 col-md-offset-1 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images1.jpg" alt="Luxury Ready Goods in Season" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
    <div class="col-md-2 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images2.jpg" alt="Luxury Preorders" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
    <div class="col-md-2 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images1.jpg" alt="Luxury Ready Goods in Season" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
    <div class="col-md-2 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images2.jpg" alt="Luxury Preorders" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
    <div class="col-md-2 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/images1.jpg" alt="Luxury Ready Goods in Season" width="200" height="180" style="border: 1px solid #000000; padding: 1">
        </a>
    </div>
</div>

Cosi però il conteggio non è 11 ?

[Artgallery75]

Cosi però il conteggio non è 11 ?

Ho usato questa soluzione..

<div class="row">            <div class="col-lg-2 portfolio-item">                <a href="#">                    <img class="img-responsive" src="webcam/arieldiamond.jpg" alt="Luxury Ready Goods in Season" style="border: 1px solid #000000; padding: 1" width="200" height="180"></a><a href="http://www.luxury-italian-office.com/fashion-brands/luxury-ready-goods-in-season/">                    </a>            </div>            <div class="col-lg-2 portfolio-item">                <a href="#">                    <img class="img-responsive" src="webcam/cleopatra_sinns.jpg" alt="Luxury Ready Goods in Season" style="border: 1px solid #000000; padding: 1" width="200" height="180"></a><a href="http://www.luxury-italian-office.com/fashion-brands/luxury-preorders/">                    </a>            </div>            <div class="col-lg-2 portfolio-item">                <a href="#">                    <img class="img-responsive" src="webcam/fitslimshyfamous.jpg" alt="Luxury Ready Goods in Season" style="border: 1px solid #000000; padding: 1" width="200" height="180"> </a>            </div>            <div class="col-lg-2 portfolio-item">                <a href="#">                    <img class="img-responsive" src="webcam/hothung23.jpg" alt="Luxury Ready Goods in Season" style="border: 1px solid #000000; padding: 1" width="200" height="180"> </a>            </div>            <div class="col-lg-2 portfolio-item">                <a href="#">                    <img class="img-responsive" src="webcam/iloveanal1996.jpg" alt="Luxury Ready Goods in Season" style="border: 1px solid #000000; padding: 1" width="200" height="180"> </a>            </div>            <div class="col-lg-2 portfolio-item">                <a href="#">                    <img class="img-responsive" src="webcam/sexyanabelle22.jpg" alt="Luxury Ready Goods in Season" style="border: 1px solid #000000; padding: 1" width="200" height="180"> </a>            </div>        </div>

Comunque grazie lo stesso...

Ho un altro problema.
Devo inserire una scritta sopra le immagini avrei trovato il codice che però sembra faccia a cozzi con bootstrap..
Ho trovato questo qui: http://www.html.it/pag/18965/inserir...su-unimmagine/