Cinq colonnes égales dans twitter bootstrap

Question

Je veux avoir 5 colonnes égales sur une page que je fais construire et je n’arrive pas de comprendre comment la grille de la 5 colonne est utilisé ici http://domain7.com/mobile/tools/bootstrap/responsive/

La grille de cinq colonnes est démontrée ci-dessus inscrit dans le cadre de « bootstrap » de twitter.

Answer 1

Pour Bootstrap 3 et ci-dessus

Un fantastique 5 colonnes de mise en page avec Twitter Bootstrap a été créé ici.

C'est de loin la solution la plus avancée, car il fonctionne de manière transparente avec Bootstrap 3. Il vous permet de ré-utiliser les classes, encore et encore, de paire avec les actuelles classes de Bootstrap pour le responsive design.

Vous devez d'abord créer de la valeur par défaut définition de la colonne dans la façon dont Bootstrap faire. Appeler col-*-5e si vous n'obtenez pas les mélanger avec tous les autres noms.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

Ensuite, vous devez définir la largeur de nouvelles classes dans le cas de différentes requêtes de média.

.col-xs-5ths {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

Fait! Maintenant, vous êtes prêt à les combiner vos cours avec l'original Bootstrap classes. Par exemple, si vous souhaitez créer de l'élément div qui se comportent comme des cinq colonnes de mise en page sur la moyenne des écrans et comme les deux colonnes sur les plus petits, vous avez juste besoin d'utiliser quelque chose comme ceci:

<div class="row">
    <div class="col-md-5ths col-xs-6">
    ...
    </div>
</div>

TRAVAIL DÉMO - Agrandir l'image pour voir les colonnes deviennent sensibles.

Une AUTRE DÉMO - intégration du nouveau col-*-5ths les classes avec d'autres tels que l' col-*-3 et col-*-2. Redimensionner l'image pour voir tous les changements d' col-xs-6 en responsive vue.

Answer 2

Utiliser les cinq balises div avec une classe de span2 et donner le premier une classe d’offset1.

Tour est joué ! Cinq également espacés et centrée sur les colonnes.

---

Dans « bootstrap » 3.0, ce code ressemblerait

Answer 3

Pour le Bootstrap 3, si vous voulez pleine largeur et utilisez , , ou quelque chose de similaire, tout ce que vous avez à faire est faire usage de Bootstrap mixin fonctions, , etc..

MOINS :

SASS :

Answer 4

Au-dessous d’est une liste déroulante des réponses @machineaddict et @Mafnah, ré-écrit pour 3 Bootstrap (travail bien pour moi jusqu'à maintenant) :

Answer 5

De conserver l'original de bootstrap avec 12 colonnes, ne pas le personnaliser. La seule modification que vous avez besoin de faire est un peu de css après l'original de bootstrap responsive css, comme ceci:

Edit: ce qui suit ne peuvent travailler que pour Bootstrap 2.3.2 et ci-dessous:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

Et le code html:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

Remarque: Même si le span2 fois sur 5 n'est pas égal à 12 colonnes, vous voyez l'idée :)

Un exemple peut être trouvé ici http://jsfiddle.net/v3Uy5/6/