web-dev-qa-db-fra.com

Bootstrap 3 colonnes extra larges (xl)

Dans la construction LESS de Bootstrap, quelqu'un peut-il me dire comment ajouter une cinquième taille de périphérique, extra large (col-xl-#)?

twitter-bootstraptwitter-bootstrap-3less
35
dubloons

Vous pouvez créer un autre fichier less (par exemple bootstrapxl.less), contenant le code suivant et compiler ce fichier:

@import "bootstrap.less";

// XLarge screen
@screen-xlg:                  1600px;
@screen-xlg-min:              @screen-xlg;
@screen-xlg-hughdesktop:      @screen-xlg-min;

// So media queries don't overlap when required, provide a maximum
@screen-lg-max:              (@screen-xlg-min - 1);

//== Container sizes
// Large screen / wide desktop
@container-xlarge-desktop:      ((1540px + @grid-Gutter-width));
@container-xlg:                 @container-xlarge-desktop;

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

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

.make-grid-xlgcolumns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xlg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xlg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner Gutter via padding
      padding-left:  (@grid-Gutter-width / 2);
      padding-right: (@grid-Gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}
.make-grid-xlgcolumns();
.make-grid(xlg);

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

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

Notez qu'au lieu du mixin .make-grid-xlgcolumns Dans le code ci-dessus, vous pouvez également modifier le mixin .make-grid-columns() dans le fichier less/minins/grid-framework.less en ajoutant le .col-xlg- préfixe de classe.

Depuis BS 3.2.0, vous devez utiliser le préfixeur automatique pour vous assurer que votre nouvelle version compilée prend en charge le même navigateur que la version compilée d'origine, voir également: https://github.com/twbs/bootstrap/issues/ 1362 Pour exécuter le correcteur automatique de votre nouveau code, remplacez la référence de fichier bootstrap.less Par une référence à votre nouveau bootstrapxl.less dans Gruntfile.js et exécutez grunt dist Après vos modifications.

mise à jour

Veuillez noter que la solution ci-dessus ne fonctionne que lorsque vous ajoutez des classes de colonnes pour une grille plus grande. Voir https://stackoverflow.com/a/26963773/1596547 pour ajouter des colonnes ou des grilles qui chevauchent les grilles par défaut.

25
Bass Jobsen

Vous pouvez télécharger un simple petit fichier CSS depuis GitHub en utilisant ce lien: https://github.com/marcvannieuwenhuijzen/BootstrapXL

Si vous ajoutez ce fichier CSS au HTML après le Bootstrap, vous pourrez utiliser col-xl-{size}, col-xl-Push, hidden-xl, etc. Le point d'arrêt de la requête multimédia est 1600px;

Mise à jour La version alpha de Bootstrap 4 est maintenant disponible avec un support natif pour les écrans extra-larges. http : //blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ mais son point d'arrêt pour les très grands est toujours de 1200 px.

Mise à jour 2 (juillet 2017) Cesser d'utiliser bootstrap et commencer à utiliser les grilles CSS standard, AUJOURD'HUI. Vous pouvez trouver une introduction ici .

70
Marc van Nieuwenhuijzen

https://github.com/shenders13/bootstrap-grid-100cols-with-xl-and-xxl

Un fichier CSS qui contient les classes bootstrap avec des classes xlg (> 1500px width) et xxlg (> 2000 px width) supplémentaires. La grille est divisée en colonnes avec 1/100 de largeur de la div parent .

1
Sam Henderson

Twitter Bootstrap vous a écouté maintenant # V4 Support for Extra Large Devices Now -> http://v4-alpha.getbootstrap.com/layout/grid/#grid-options

1
Harry