web-dev-qa-db-fra.com

Comment personnaliser Bootstrap Largeurs de colonne?

J'ai ceci, mais j'estime que 4 est trop grand pour la largeur de ma barre latérale et 3 est trop petit (il doit en ajouter jusqu'à 12).

  <div class="col-md-8">
  <div class="col-md-4">

J'ai essayé ça mais ça ne marche pas:

  <div class="col-md-8.5">
  <div class="col-md-3.5">

Y a-t-il un autre moyen d'obtenir un résultat similaire?

Merci de votre aide!

csstwitter-bootstrapmultiple-columnssidebar
26
AnthonyGalli.com

Pour développer la réponse de @ isherwood, voici le code complet permettant de créer un fichier personnalisé -sm- largeurs dans Bootstrap 3.3

En général, vous voulez rechercher une largeur de colonne existante (disons col-sm-3) et copiez tous les styles qui s’y appliquent, y compris les styles génériques, sur votre feuille de style personnalisée dans laquelle vous définissez les nouvelles largeurs de colonne.

.col-sm-3half, .col-sm-8half {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-sm-3half, .col-sm-8half {
        float: left;
    }
    .col-sm-3half {
        width: 29.16666667%;
    }
    .col-sm-8half {
        width: 70.83333333%;
    }
}
22
Tobia

Pour une grille de 12 colonnes, si vous souhaitez ajouter la moitié d'une colonne (4,16667%) à la largeur de chaque colonne. C'est ce que tu fais.

Par exemple, pour col-md - X , définissez .col-md -X-5 avec les valeurs suivantes.

.col-md-1-5 { width: 12,5%; } // = 8,3333 + 4,16667
.col-md-2-5 { width: 20,83333%; } // = 16,6666 + 4,16667
.col-md-3-5 { width: 29,16667%; } // = 25 + 4,16667
.col-md-4-5 { width: 37,5%; } // = 33,3333 + 4,16667
.col-md-5-5 { width: 45,83333%; } // = 41,6667 + 4,16667
.col-md-6-5 { width: 54,16667%; } // = 50 + 4,16667
.col-md-7-5 { width: 62,5%; } // = 58,3333 + 4,16667
.col-md-8-5 { width: 70,83333%; } // = 66,6666 + 4,16667
.col-md-9-5 { width: 79,16667%; } // = 75 + 4,16667
.col-md-10-5 { width: 87,5%; } // = 83,3333 + 4,16667
.col-md-11-5 { width: 95,8333%; } // = 91,6666 + 4,16667

J'ai arrondi certaines valeurs.

Deuxièmement, pour éviter de copier le code CSS à partir du col-md original - X , utilisez-les dans la déclaration de classe. Veillez à ce qu'ils soient ajoutés avant vos modifiés. De cette façon, seule la largeur est annulée.

<div class="col-md-2 col-md-2-5">...</div>
<div class="col-md-5">...</div>
<div class="col-md-4 col-md-4-5">...</div>

Enfin, n'oubliez pas que le total ne doit pas dépasser 12 colonnes, soit un total de 100%.

J'espère que ça aide!

16
Wawa Loo

Vous pouvez certainement créer vos propres cours:

.col-md-3point5 {width: 28.75%}
.col-md-8point5 {width: 81.25%;}

Je le ferais avant de jouer avec les colonnes par défaut. Vous voudrez peut-être utiliser ceux-ci.

Vous voudrez probablement également les insérer dans une instruction de requête multimédia afin qu’elles ne s’appliquent que pour des tailles d’écran plus grandes que mobile.

6
isherwood

Vous pouvez utiliser les propres mixins de colonnes de Bootstrap make-xx-column():

.col-md-8half {
    .make-md-column(8.5);
}

.col-md-3half {
    .make-md-column(3.5);
}
5
Antoni

Bootstrap 4.1 + version de la réponse d'Antoni:

Le Bootstrap mixin est maintenant @include make-col($size, $columns: $grid-columns)

.col-md-8half {
  @include make-col-ready();

  @include media-breakpoint-up(md) {
    @include make-col(8.5);
  }
}

.col-md-3half {
  @include make-col-ready();

  @include media-breakpoint-up(md) {
    @include make-col(3.5);
  }
}

La source:

3
Mario Steingruber

vous pouvez personnaliser bootstrap stylesheet, comme dans:

.col-md-8{
  width: /*as you wish*/;
}

Ensuite, définissez la requête multimédia pour cela aussi, comme dans:

@media screen and (max-width:768px){
  .col-md-8{
     width:99%;
   }
}
1
Herman Nz