twitter bootstrap - mensajes - Bootstrap 3: agregar un nuevo conjunto de columnas

form bootstrap 3

Question

He estado usando Bootstrap 3 por un tiempo y ahora necesito hacer un nuevo conjunto de columnas 384px para móviles horizontales (por ejemplo, ancho de pantalla de 384px ) y luego usarlo de la siguiente manera:

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

¿Hay algunas Bootstrap Less para este propósito? No estoy seguro de cómo usarlos

editar:

Hay una .make-grid() Bootstrap llamada .make-grid() , pero no puedo hacer que funcione.

Answer 1

Código para col-xxs-x , col-xxs-offset , col-xxs-push , col-xxs-pull :

Agrega este código:

.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%;
    }
}    

Código para hidden-xxs :

Agrega este código:

.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;
    }
}

Y también reemplazar:

@media (max-width: 767px) { 

con:

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

dentro de bootstrap.css en estos 4 bloques:

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

Código para visible-xxs :

Agrega este código:

.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;
    }

}

Y también reemplazar:

@media (max-width: 767px) { 

con:

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

dentro de bootstrap.css en estos 4 bloques:

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

Answer 2

Gracias paulalexandru por esta excelente y muy útil solución. Hace poco necesito usar la opción de compensación de restablecimiento (col-xxs-offset-0) en las pantallas más pequeñas, así que tuve que agregar esas pocas líneas porque funciona bien:

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

Lo publico aquí, quizás sería útil para aquellos que puedan encontrar esta necesidad también.

Answer 3

Otros tienen soluciones más complejas, pero realmente hay una solución más fácil. Debido a que este es el punto de quiebre más pequeño, puede agregar la clase usted mismo con la bandera! Important para que anule los tamaños de columna más grandes (como este). Utilizo el nombre col-tn-12 porque a eso se llamará este punto de interrupción cuando se despliegue Bootstrap 4.

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

Answer 4

Puede usar lo siguiente para lograr esto. Personalmente, me conecto con el CDN bootstrap en mis proyectos y mantengo una versión local de bootstrap para poder acceder a sus mixins para mis estilos específicos del sitio, que es donde colocaría lo siguiente ...

SCSS

@media (max-width: $screen-xs-min) {
  @include make-grid(xxs);
}

Menos

@media (max-width: @screen-xs-min) {
  .make-grid(xxs);
}

Answer 5

Solo podría eliminar las consultas de medios de las columnas del css. Eso mantendría el ancho de precedencia de las columnas en cualquier tamaño de pantalla.

Answer 6

Tenga en cuenta que el CSS de Bootstrap usa una primera estrategia móvil, por lo que es importante definir su xxs-grid (debería elegir otro nombre) después de la grilla xs pero antes de la grilla-sm. Ver también: Bootstrap 3 mixin multiple make - * - column .

Por ese motivo, no puede usar el código Less de esta pregunta Bootstrap 3 columnas extra grandes (xl)

1. Descargue el código fuente de Bootstrap en: http://getbootstrap.com/getting-started/
2. en less/variables.less agregue:

-

// horizontal mobiles
@screen-xxs-min:             384px;
@container-xxs: (336px + @grid-gutter-width);

3. Abra less/grid.less cambie la clase .container la siguiente manera:

-

.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;
  }

y entre la cuadrícula Extra pequeña y el código de cuadrícula pequeña, agregue:

@media (min-width: @screen-xxs-min) {
  .make-grid(xxs);
}

4. En el archivo ''less / mixins / grid-framework.less'', reemplace dos veces @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; con @item: ~".col-xs-@{index}, .col-xxs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";

5. Y finalmente ejecuta el grunt dist

   6. (opcional) agregue el siguiente código al archivo /less/mixins/grid.less

-

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

Answer 7

esta implementación completa (incluyendo pull-push-offset-visible-hidden) se implementará en v4 como lo menciona @mdo

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

y aquí https://github.com/twbs/bootstrap/pull/12893 .

Una posible alternativa se publica aquí https://github.com/donquixote/bootstrap-compiled/tree/xs-AB-subdivision .

Answer 8

usando el código del github alternativo que @facundo publicó, cambié la primera línea de un ancho mínimo de 480px a un ancho mínimo de 0 y un ancho máximo de 480px y parecía funcionar para lo que necesitaba sin tener que use cualquier otra codificación o archivo:

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