Comment utiliser bootstrap avec 16 ou 24 colonnes

j'ai besoin d'aide pour définir bootstrap 2.0.4 à 16 ou 24 colonnes au lieu des 12 colonnes par défaut Je ne peux pas comprendre ce que je fais de travers j'ai essayé l'option de personnalisation sur le site de bootstrap et j'ai essayé de changer les variables de grille dans les variables.moins de file et de recompiler bootstrap.moins D'utilisation de Crunch mais pour les deux essais, j'ai toujours le même résultat .c'est toujours 12 colonnes !!! quand j'essaie de définir une div pour être span12 il prend encore l'écran entier ?

Can n'importe qui me guide à ce qui est mal je fais ou si quelqu'un peut générer un 16 et 24 colonnes versions et les envoyer à moi qui serait parfait

22
demandé sur Dan 2012-07-21 13:56:51

10 réponses

cette méthode est pour une ancienne version de Bootstrap-Version 2.3.1

cliquez sur ce lien pour personnaliser bootstrap: http://twitter.github.com/bootstrap/customize.html

Vous trouverez des exemples comme celui-ci. Modifier les paramètres en fonction de vos besoins. 

16 Grid system with Gutter
@gridColumns: 16
@gridColumnWidth: 45px
@gridGutterWidth: 15px
@gridColumnWidth1200: 52.5px
@gridGutterWidth1200: 22.5px
@gridColumnWidth768: 31.5px
@gridGutterWidth768: 15px

16 Grid system without Gutter
@gridColumns: 16
@gridColumnWidth: 60px
@gridGutterWidth: 0px
@gridColumnWidth1200: 75px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 46.5px
@gridGutterWidth768: 0px

24 Grid system with Gutter
@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid system without Gutter
@gridColumns: 24
@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px
19
répondu Hasan Atbinici 2016-04-04 22:00:06

pour 24 colums, vous pouvez diviser main div 

<div class="col-md-12">

    <div class="col-md-6">
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
        <div class="col-md-1">nothing</div>
    </div>

    <div class="col-md-6">12 here</div>

</div>

codepen démo

13
répondu İsmail Hakkı Şen 2016-03-10 12:06:42

assez Simple pour altérer en moins - http://twitter.github.com/bootstrap/scaffolding.html#gridCustomization

vous voudrez changer les variables là-bas à ce que vous voulez -

p.ex. 

@gridColumns: 24
@gridColumnWidth: 30px
@gridGutterWidth: 10px

si vous utilisez une grille fluide, vous voudrez changer ces variables proportionnellement aussi, sinon span12 prendra toujours 100% de la largeur et span24 prendra 200% 

@fluidGridColumnWidth
@fluidGridGutterWidth

comme indiqué:

comment personnaliser

modifier la grille signifie changer les trois variables @grid* et recompiler Bootstrap. Changer les variables de la grille dans les variables.moins et utiliser l'une des quatre façons documentées de recompiler. Si vous ajoutez plus de colonnes, assurez-vous d'ajouter les CSS pour ceux dans la grille.peu.

Vous pouvez modifier les variables et télécharger le nouveau css ici: http://twitter.github.com/bootstrap/download.html#variables

voici un exemple compilé qui devrait fonctionner pour 16 colonnes (n'ont pas testé, laissez-moi savoir comment cela fonctionne): https://s3.amazonaws.com/intenex/bootstrap16columns.zip

11
répondu Intenex 2012-07-23 05:01:23

Edit: la Création de grilles personnalisées nombre de colonnes a été restauré, et peut être fait sur Bootstrap personnalisation de la page .

pour des raisons que je ne connais pas, la dernière version de Bootstrap (3.0.0/1) Ne vous permet pas de créer une grille différente de 12 colonnes, ce qui est une grande honte.

ce que nous pouvons faire actuellement, et qui à son tour permettra de créer des paquets bootstrap plus personnalisés, est de mettre en place votre propre Bootstrap customizer.

Edit: je l'ai juste essayé. L'installation de toutes les dépendances s'est déroulée tout à fait en douceur tout en respectant les directives sur leur page Github Docs.

échantillon généré grille de 24 colonnes

" 
Editor required inserting some code along with jsfiddle link. There's no point in pasting anything though.
4
répondu Maciej Gurban 2014-02-04 08:31:40

16 colonne

960px

45px *16 =720 colonne

15px * 16 =240 gouttière

1200px

53px *16 =848 colonne

22px * 16 =352 gouttière

768px

33px *16 =528 colonne

15px * 16 =240 gouttière

3
répondu User 2013-06-15 06:59:02

mise à Jour 2018

un Réexamen de cette question pour la dernière Bootstrap 4. Maintenant que Bootstrap 4 est flexbox, et inclut Auto-layout colonnes , il est facile de créer des layouts avec n'importe quel nombre de n colonnes ...

16 colonnes 

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 16
            </div>
</div>

24 colonnes 

<div class="row">
            <div class="col">
                1
            </div>
            <div class="col">
                2
            </div>
            <div class="col">
                ... to 24
            </div>
</div>

Démo: https://www.codeply.com/go/4sQGt2qKyr

Voir Aussi: N nombre de colonnes dans Bootstrap 4

1
répondu Zim 2018-03-22 16:04:50

24 Colonnes:

960

35px colonne
151980920" 5px gouttière

1200

40px colonne

10px gouttière

768

29px colonne

3px gouttière

0
répondu User 2013-06-15 21:57:40

voici un moyen rapide et facile que j'ai trouvé pour faire 16 colonnes en utilisant la nidification... 

.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
<div class="row">
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
  <div class="col-md-3 no-padding">
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
    <div class="col-md-3">
      col
    </div>
  </div>
</div>
<!-- row -->
0
répondu nalcus 2016-07-03 09:13:10

j'utilise la grille 30 colonnes pour mon projet (grille 24 et 100 aussi disponibles)

https://github.com/zirafa/bootstrap-grid-only

une certaine personnalisation peut être nécessaire en fonction de vos besoins

0
répondu Arun Prasad E S 2016-07-09 05:17:47

vous pouvez outrepasser l'attribut width avec pourcentage comme ceci: 

    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>
    <div class="col-md-1" style="width: 6.25%">nothing</div>

il maintiendra même les capacités réactifs.

0
répondu Chieu Nhat Nang 2018-02-22 03:14:03