twitter bootstrap - botones - Bootstrap 3 columnas extra grandes(xl)

botones bootstrap

Question

En la construcción LESS de Bootstrap, ¿alguien puede decirme cómo agregar un quinto dispositivo de tamaño extra grande ( col-xl-# )?

Answer 1

Puede crear otro archivo menos (por ejemplo bootstrapxl.less), que contenga el siguiente código y compilar ese archivo:

@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));
  }
}

Tenga en cuenta que en lugar de .make-grid-xlgcolumns en el código anterior, también puede modificar la .make-grid-columns() en el archivo less / minins / grid-framework.less agregando .col-xlg- prefijo de clase

Desde BS 3.2.0, debe usar el autoprefixer para asegurarse de que su nueva versión compilada tenga el mismo soporte de navegador que la versión original compilada, consulte también: https://github.com/twbs/bootstrap/issues/13620 Para ejecutar el autofixer para su nuevo código reemplace la referencia de archivo bootstrap.less con una referencia a su nuevo bootstrapxl.less en Gruntfile.js y ejecute grunt dist después de sus cambios.

actualizar

Tenga en cuenta que la solución anterior solo funciona cuando agrega clases de columnas para una grilla más grande. Consulte https://stackoverflow.com/a/26963773/1596547 para agregar columnas o cuadrículas que se superponen a las cuadrículas predeterminadas.

Answer 2

Puede descargar un pequeño archivo CSS simple desde GitHub usando este enlace: https://github.com/marcvannieuwenhuijzen/BootstrapXL

Si agrega este archivo CSS al HTML después del archivo CSS de Bootstrap, podrá usar col-xl-{size} , col-xl-push , hidden-xl , etc. El punto de interrupción de la consulta de medios es 1600px;

Actualización La versión alfa de Bootstrap 4 ya está disponible con soporte nativo para pantallas extra grandes. http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ pero su punto de corte para extra grande todavía es de 1200px.

Actualización 2 (julio de 2017) Deje de usar bootstrap y comience a usar las cuadrículas estándar de CSS, TODAY. Puedes encontrar una introducción here .

Answer 3

Twitter Bootstrap ha escuchado el soporte de You # V4 para dispositivos extragrandes ahora -> v4-alpha.getbootstrap.com/layout/grid/#grid-options

Answer 4

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

Un archivo CSS que contiene la cuadrícula de bootstrap con clases adicionales de xlg (> 1500px de ancho) y xxlg (> 2000 px de ancho). La cuadrícula se divide en columnas con 1/100 de ancho del div principal.