web-dev-qa-db-fra.com

Bootstrap 3: ajout d'un nouvel ensemble de colonnes

J'utilise Bootstrap 3 Depuis un certain temps et maintenant je dois créer un nouvel ensemble de petites colonnes supplémentaires pour les mobiles horizontaux (par exemple, 384px Largeur d'écran) et après cela, utilisez-le comme suit:

col-xxs-1, col-xxs-2, col-xxs-offset-5, hidden-xxs, Etc.

Existe-t-il des BootstrapLess mixins à cet effet? Je ne sais pas comment les utiliser

éditer:

Il existe un mixage Bootstrap appelé .make-grid(), mais je ne peux pas le faire fonctionner.

twitter-bootstraptwitter-bootstrap-3lessmixins
25
Facundo Colombier

Code pour col-xxs-x, col-xxs-offset, col-xxs-Push, col-xxs-pull:

Ajoutez ce code:

.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4,
.col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8,
.col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}

@media (max-width: 384px) {
    .col-xxs-1,
    .col-xxs-2,
    .col-xxs-3,
    .col-xxs-4,
    .col-xxs-5,
    .col-xxs-6,
    .col-xxs-7,
    .col-xxs-8,
    .col-xxs-9,
    .col-xxs-10,
    .col-xxs-11 {
        float: left;
    }

    .col-xxs-1 {
        width: 8.333333333333332%;
    }

    .col-xxs-2 {
        width: 16.666666666666664%;
    }

    .col-xxs-3 {
        width: 25%;
    }

    .col-xxs-4 {
        width: 33.33333333333333%;
    }

    .col-xxs-5 {
        width: 41.66666666666667%;
    }

    .col-xxs-6 {
        width: 50%;
    }

    .col-xxs-7 {
        width: 58.333333333333336%;
    }

    .col-xxs-8 {
        width: 66.66666666666666%;
    }

    .col-xxs-9 {
        width: 75%;
    }

    .col-xxs-10 {
        width: 83.33333333333334%;
    }

    .col-xxs-11 {
        width: 91.66666666666666%;
    }

    .col-xxs-12 {
        width: 100%;
    }

    .col-xxs-Push-1 {
        left: 8.333333333333332%;
    }

    .col-xxs-Push-2 {
        left: 16.666666666666664%;
    }

    .col-xxs-Push-3 {
        left: 25%;
    }

    .col-xss-Push-4 {
        left: 33.33333333333333%;
    }

    .col-xxs-Push-5 {
        left: 41.66666666666667%;
    }

    .col-xxs-Push-6 {
        left: 50%;
    }

    .col-xxs-Push-7 {
        left: 58.333333333333336%;
    }

    .col-xxs-Push-8 {
        left: 66.66666666666666%;
    }

    .col-xxs-Push-9 {
        left: 75%;
    }

    .col-xxs-Push-10 {
       left: 83.33333333333334%;
    }

    .col-xxs-Push-11 {
       left: 91.66666666666666%;
    }

    .col-xxs-pull-1 {
        right: 8.333333333333332%;
    }

    .col-xxs-pull-2 {
        right: 16.666666666666664%;
    }

    .col-xxs-pull-3 {
        right: 25%;
    }

    .col-xxs-pull-4 {
        right: 33.33333333333333%;
    }

    .col-xxs-pull-5 {
        right: 41.66666666666667%;
    }

    .col-xxs-pull-6 {
        right: 50%;
    }

    .col-xxs-pull-7 {
        right: 58.333333333333336%;
    }

    .col-xxs-pull-8 {
        right: 66.66666666666666%;
    }

    .col-xxs-pull-9 {
        right: 75%;
    }

    .col-xxs-pull-10 {
        right: 83.33333333333334%;
    }

    .col-xxs-pull-11 {
        right: 91.66666666666666%;
    }

    .col-xxs-offset-1 {
        margin-left: 8.333333333333332%;
    }

    .col-xxs-offset-2 {
        margin-left: 16.666666666666664%;
    }

    .col-xxs-offset-3 {
        margin-left: 25%;
    }

    .col-xxs-offset-4 {
        margin-left: 33.33333333333333%;
    }

    .col-xxs-offset-5 {
        margin-left: 41.66666666666667%;
    }

    .col-xxs-offset-6 {
        margin-left: 50%;
    }

    .col-xxs-offset-7 {
        margin-left: 58.333333333333336%;
    }

    .col-xxs-offset-8 {
        margin-left: 66.66666666666666%;
    }

    .col-xxs-offset-9 {
        margin-left: 75%;
    }

    .col-xxs-offset-10 {
        margin-left: 83.33333333333334%;
    }

    .col-xxs-offset-11 {
        margin-left: 91.66666666666666%;
    }
}

Code pour hidden-xxs:

Ajoutez ce code:

.hidden-xxs {
    display: block !important;
}

tr.hidden-xxs {
    display: table-row !important;
}

th.hidden-xxs,
td.hidden-xxs {
    display: table-cell !important;
}

@media (max-width: 384px) {

    .hidden-xxs {
        display: none !important;
    }

    tr.hidden-xxs {
        display: none !important;
    }

    th.hidden-xxs,
    td.hidden-xxs {
        display: none !important;
    }

}

@media (min-width: 385px) and (max-width: 767px) {

    .hidden-xxs.hidden-xs {
        display: none !important;
    }

    tr.hidden-xxs.hidden-xs {
        display: none !important;
    }

    th.hidden-xxs.hidden-xs,
    td.hidden-xxs.hidden-xs {
        display: none !important;
    }

}

@media (min-width: 768px) and (max-width: 991px) {

    .hidden-xxs.hidden-sm {
        display: none !important;
    }

    tr.hidden-xxs.hidden-sm {
        display: none !important;
    }

    th.hidden-xxs.hidden-sm,
    td.hidden-xxs.hidden-sm {
        display: none !important;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {

    .hidden-xxs.hidden-md {
        display: none !important;
    }

    tr.hidden-xxs.hidden-md {
        display: none !important;
    }

    th.hidden-xxs.hidden-md,
    td.hidden-xxs.hidden-md {
        display: none !important;
    }

}

@media (min-width: 1200px) {

    .hidden-xxs.hidden-lg {
        display: none !important;
    }

    tr.hidden-xxs.hidden-lg {
        display: none !important;
    }

    th.hidden-xxs.hidden-lg,
    td.hidden-xxs.hidden-lg {
        display: none !important;
    }

}

@media (max-width: 384px) {

    .hidden-xs.hidden-xxs {
        display: none !important;
    }

    tr.hidden-xs.hidden-xxs {
        display: none !important;
    }

    th.hidden-xs.hidden-xxs,
    td.hidden-xs.hidden-xxs {
        display: none !important;
    }

}

@media (max-width: 384px) {

    .hidden-sm.hidden-xxs {
        display: none !important;
    }

    tr.hidden-sm.hidden-xxs {
        display: none !important;
    }

    th.hidden-sm.hidden-xxs,
    td.hidden-sm.hidden-xxs {
        display: none !important;
    }

}

@media (max-width: 384px) {

    .hidden-md.hidden-xxs {
        display: none !important;
    }

    tr.hidden-md.hidden-xxs {
        display: none !important;
    }

    th.hidden-md.hidden-xxs,
    td.hidden-md.hidden-xxs {
        display: none !important;
    }

}

@media (max-width: 384px) {

    .hidden-lg.hidden-xxs {
        display: none !important;
    }

    tr.hidden-lg.hidden-xxs {
        display: none !important;
    }

    th.hidden-lg.hidden-xxs,
    td.hidden-lg.hidden-xxs {
        display: none !important;
    }
}

Et aussi remplacer:

@media (max-width: 767px) {

avec:

@media (min-width: 385px) and (max-width: 767px) {

à l'intérieur de bootstrap.css à ces 4 blocs:

@media (max-width: 767px) { //line 5640 in default bootstrap.css v3.0.0
  .hidden-xs {
    display: none !important;
  }
  tr.hidden-xs {
    display: none !important;
  }
  th.hidden-xs,
  td.hidden-xs {
    display: none !important;
  }
}

@media (max-width: 767px) { //line 5698 in default bootstrap.css v3.0.0
  .hidden-sm.hidden-xs {
    display: none !important;
  }
  tr.hidden-sm.hidden-xs {
    display: none !important;
  }
  th.hidden-sm.hidden-xs,
  td.hidden-sm.hidden-xs {
    display: none !important;
  }
}

@media (max-width: 767px) { //line 5756 in default bootstrap.css v3.0.0
  .hidden-md.hidden-xs {
    display: none !important;
  }
  tr.hidden-md.hidden-xs {
    display: none !important;
  }
  th.hidden-md.hidden-xs,
  td.hidden-md.hidden-xs {
    display: none !important;
  }
}

@media (max-width: 767px) { //line 5814 in default bootstrap.css v3.0.0
  .hidden-lg.hidden-xs {
    display: none !important;
  }
  tr.hidden-lg.hidden-xs {
    display: none !important;
  }
  th.hidden-lg.hidden-xs,
  td.hidden-lg.hidden-xs {
    display: none !important;
  }
}

Code pour visible-xxs:

Ajoutez ce code:

.visible-xxs {
    display: none !important;
}

tr.visible-xxs {
    display: none !important;
}

th.visible-xxs,
td.visible-xxs {
    display: none !important;
}

@media (max-width: 384px) {

    .visible-xxs {
        display: block !important;
    }

    tr.visible-xxs {
        display: table-row !important;
    }

    th.visible-xxs,
    td.visible-xxs {
        display: table-cell !important;
    }

}

@media (min-width: 385px) and (max-width: 767px) {

    .visible-xxs.visible-xs {
        display: block !important;
    }

    tr.visible-xxs.visible-xs {
        display: table-row !important;
    }

    th.visible-xxs.visible-xs,
    td.visible-xxs.visible-xs {
        display: table-cell !important;
    }

}

@media (min-width: 768px) and (max-width: 991px) {

    .visible-xxs.visible-sm {
        display: block !important;
    }

    tr.visible-xxs.visible-sm {
        display: table-row !important;
    }

    th.visible-xxs.visible-sm,
    td.visible-xxs.visible-sm {
        display: table-cell !important;
    }

}

@media (min-width: 992px) and (max-width: 1199px) {

    .visible-xxs.visible-md {
        display: block !important;
    }

    tr.visible-xxs.visible-md {
        display: table-row !important;
    }

    th.visible-xxs.visible-md,
    td.visible-xxs.visible-md {
        display: table-cell !important;
    }

}

@media (min-width: 1200px) {

    .visible-xxs.visible-lg {
        display: block !important;
    }

    tr.visible-xxs.visible-lg {
        display: table-row !important;
    }

    th.visible-xxs.visible-lg,
    td.visible-xxs.visible-lg {
        display: table-cell !important;
    }

}

@media (max-width: 384px) {

    .visible-xs.visible-xxs {
        display: block !important;
    }

    tr.visible-xs.visible-xxs {
        display: table-row !important;
    }

    th.visible-xs.visible-xxs,
    td.visible-xs.visible-xxs {
        display: table-cell !important;
    }

}

@media (max-width: 384px) {

    .visible-sm.visible-xxs {
        display: block !important;
    }

    tr.visible-sm.visible-xxs {
        display: table-row !important;
    }

    th.visible-sm.visible-xxs,
    td.visible-sm.visible-xxs {
        display: table-cell !important;
    }

}

@media (max-width: 384px) {

    .visible-md.visible-xxs {
        display: block !important;
    }

    tr.visible-md.visible-xxs {
        display: table-row !important;
    }

    th.visible-md.visible-xxs,
    td.visible-md.visible-xxs {
        display: table-cell !important;
    }

}

@media (max-width: 384px) {

    .visible-lg.visible-xxs {
        display: block !important;
    }

    tr.visible-lg.visible-xxs {
        display: table-row !important;
    }

    th.visible-lg.visible-xxs,
    td.visible-lg.visible-xxs {
        display: table-cell !important;
    }

}

Et aussi remplacer:

@media (max-width: 767px) {

avec:

@media (min-width: 385px) and (max-width: 767px) {

à l'intérieur de bootstrap.css à ces 4 blocs:

@media (max-width: 767px) { //line 5408 in default bootstrap.css v3.0.0
  .visible-xs {
    display: block !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}

@media (max-width: 767px) { //line 5466 in default bootstrap.css v3.0.0
  .visible-sm.visible-xs {
    display: block !important;
  }
  tr.visible-sm.visible-xs {
    display: table-row !important;
  }
  th.visible-sm.visible-xs,
  td.visible-sm.visible-xs {
    display: table-cell !important;
  }
}

@media (max-width: 767px) { //line 5524 in default bootstrap.css v3.0.0
  .visible-md.visible-xs {
    display: block !important;
  }
  tr.visible-md.visible-xs {
    display: table-row !important;
  }
  th.visible-md.visible-xs,
  td.visible-md.visible-xs {
    display: table-cell !important;
  }
}

@media (max-width: 767px) { //line 5582 in default bootstrap.css v3.0.0
  .visible-lg.visible-xs {
    display: block !important;
  }
  tr.visible-lg.visible-xs {
    display: table-row !important;
  }
  th.visible-lg.visible-xs,
  td.visible-lg.visible-xs {
    display: table-cell !important;
  }
}
39
paulalexandru

Notez que le CSS de Bootstrap utilise une première stratégie mobile, il est donc important de définir votre grille xxs (je devrais choisir un autre nom) après la grille xs mais avant la grille sm. Voir aussi: Bootstrap 3 mixin multiple make - * - column .

Pour cette raison, vous ne pouvez pas utiliser le code Less de cette question Bootstrap 3 colonnes extra larges (xl)

  1. Téléchargez le code source Bootstrap sur: http://getbootstrap.com/getting-started/
  2. dans less/variables.less ajouter:

-

// horizontal mobiles
@screen-xxs-min:             384px;
@container-xxs: (336px + @grid-Gutter-width);
  1. Ouvert less/grid.less changer la .container classe comme suit:

-

.container {
  .container-fixed();
  @media (min-width: @screen-xxs-min) {
    width: @container-xxs;
  }

  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }

et entre le code Extra small grid et Small grid, ajoutez:

@media (min-width: @screen-xxs-min) {
  .make-grid(xxs);
}
  1. Dans le fichier 'less/mixins/grid-framework.less', remplacez deux fois @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; avec @item: ~".col-xs-@{index}, .col-xxs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";

  2. Et enfin exécutez grunt dist

    1. (facultatif) ajoutez le code suivant au /less/mixins/grid.less fichier

-

// Generate the small columns
.make-xxs-column(@columns; @Gutter: @grid-Gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@Gutter / 2);
  padding-right: (@Gutter / 2);

  @media (min-width: @screen-xxs-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-xxs-column-offset(@columns) {
  @media (min-width: @screen-xxs-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-xxs-column-Push(@columns) {
  @media (min-width: @screen-xxs-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-xxs-column-pull(@columns) {
  @media (min-width: @screen-xxs-min) {
    right: percentage((@columns / @grid-columns));
  }
}
11
Bass Jobsen

cette implémentation complète (y compris pull-Push-offset-visible-hidden) sera implémentée dans la v4 comme mentionné par @ mdo

ici https://github.com/twbs/bootstrap/issues/10203#issuecomment-23823054

et ici https://github.com/twbs/bootstrap/pull/1289 .

Une alternative possible est publiée ici https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision .

3
Facundo Colombier

D'autres ont des solutions plus complexes, mais il y a vraiment une solution plus simple. Comme il s'agit du plus petit point d'arrêt, vous pouvez simplement ajouter la classe vous-même avec l'indicateur! Important afin qu'il remplace les plus grandes tailles de colonne (comme celle-ci). J'utilise le nom col-tn-12 car c'est ainsi que ce point d'arrêt sera appelé lorsque Bootstrap 4 sera déployé.

@media (max-width: 480px) {
    .col-tn-12 {
        width: 100% !important
    }
}
2
Jacob Beasley

en utilisant le code du github alternatif que @facundo a posté, j'ai changé la première ligne d'une largeur minimale de 480px à une largeur minimale de 0 et une largeur maximale de 480px et cela semblait fonctionner pour ce dont j'avais besoin sans avoir à utiliser tout autre codage ou fichier:

   @media (min-width: 0px) and (max-width:480px){
  .col-xs-B-1, .col-xs-B-2, .col-xs-B-3, .col-xs-B-4, .col-xs-B-5, .col-xs-B-6, .col-xs-B-7, .col-xs-B-8, .col-xs-B-9, .col-xs-B-10, .col-xs-B-11, .col-xs-B-12 {
    float: left;
  }
  .col-xs-B-12 {
    width: 100%;
  }
  .col-xs-B-11 {
    width: 91.66666667%;
  }
  .col-xs-B-10 {
    width: 83.33333333%;
  }
  .col-xs-B-9 {
    width: 75%;
  }
  .col-xs-B-8 {
    width: 66.66666667%;
  }
  .col-xs-B-7 {
    width: 58.33333333%;
  }
  .col-xs-B-6 {
    width: 50%;
  }
  .col-xs-B-5 {
    width: 41.66666667%;
  }
  .col-xs-B-4 {
    width: 33.33333333%;
  }
  .col-xs-B-3 {
    width: 25%;
  }
  .col-xs-B-2 {
    width: 16.66666667%;
  }
  .col-xs-B-1 {
    width: 8.33333333%;
  }
  .col-xs-B-pull-12 {
    right: 100%;
  }
  .col-xs-B-pull-11 {
    right: 91.66666667%;
  }
  .col-xs-B-pull-10 {
    right: 83.33333333%;
  }
  .col-xs-B-pull-9 {
    right: 75%;
  }
  .col-xs-B-pull-8 {
    right: 66.66666667%;
  }
  .col-xs-B-pull-7 {
    right: 58.33333333%;
  }
  .col-xs-B-pull-6 {
    right: 50%;
  }
  .col-xs-B-pull-5 {
    right: 41.66666667%;
  }
  .col-xs-B-pull-4 {
    right: 33.33333333%;
  }
  .col-xs-B-pull-3 {
    right: 25%;
  }
  .col-xs-B-pull-2 {
    right: 16.66666667%;
  }
  .col-xs-B-pull-1 {
    right: 8.33333333%;
  }
  .col-xs-B-pull-0 {
    right: 0%;
  }
  .col-xs-B-Push-12 {
    left: 100%;
  }
  .col-xs-B-Push-11 {
    left: 91.66666667%;
  }
  .col-xs-B-Push-10 {
    left: 83.33333333%;
  }
  .col-xs-B-Push-9 {
    left: 75%;
  }
  .col-xs-B-Push-8 {
    left: 66.66666667%;
  }
  .col-xs-B-Push-7 {
    left: 58.33333333%;
  }
  .col-xs-B-Push-6 {
    left: 50%;
  }
  .col-xs-B-Push-5 {
    left: 41.66666667%;
  }
  .col-xs-B-Push-4 {
    left: 33.33333333%;
  }
  .col-xs-B-Push-3 {
    left: 25%;
  }
  .col-xs-B-Push-2 {
    left: 16.66666667%;
  }
  .col-xs-B-Push-1 {
    left: 8.33333333%;
  }
  .col-xs-B-Push-0 {
    left: 0%;
  }
  .col-xs-B-offset-12 {
    margin-left: 100%;
  }
  .col-xs-B-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xs-B-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xs-B-offset-9 {
    margin-left: 75%;
  }
  .col-xs-B-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xs-B-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xs-B-offset-6 {
    margin-left: 50%;
  }
  .col-xs-B-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xs-B-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xs-B-offset-3 {
    margin-left: 25%;
  }
  .col-xs-B-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xs-B-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xs-B-offset-0 {
    margin-left: 0%;
  }
}
1
Dm Parrish

Merci paulalexandru pour cette excellente solution très utile. J'ai récemment dû utiliser l'option de réinitialisation du décalage (col-xxs-offset-0) sur les plus petits écrans, j'ai donc dû ajouter ces quelques lignes car cela fonctionne bien:

@media (max-width: 480px) {
    .col-xxs-pull-0 {
        right: 0;
    }
    .col-xxs-Push-0 {
        left: 0;
    }
    .col-xxs-offset-0 {
        margin-left: 0;
    }
}

Je le poste ici, ce serait peut-être utile pour ceux qui pourraient également rencontrer ce besoin.

0
developpeuse web