jquery - español - Cambie los botones a "btn-block" en el tamaño de la pantalla móvil

bootstrap templates

Question

Usando Bootstrap 3, ¿hay una manera de hacer que los botones usen la clase btn-block cuando están en un tamaño de pantalla "xs"?

Actualmente tengo un formulario que tiene algunas filas que contienen 3 menús desplegables y dos botones, que se ve bien en pantallas grandes y medianas.

Cuando el formulario cambia en pantallas pequeñas, y los controles de formulario se ven obligados a fluir verticalmente, los botones permanecen del mismo tamaño y se ven tontos, con ellos empujados hacia el lado izquierdo de la pantalla.

Idealmente, me gustaría poder tenerlos como botones de bloqueo cuando están en los tamaños de pantalla más pequeños, para que ocupen todo el ancho (de la forma, al igual que los controles de formulario) y hagan que se vea un poco mejor.

Answer 1

Agregar el CSS que se muestra a continuación a su aplicación Bootstrap 3 permite el soporte para

.btn-xs-block
.btn-sm-block
.btn-md-block
.btn-lg-block

clases que proporcionan variaciones de btn-block que son sensibles y específicas al tamaño de la ventana gráfica.

Si tiene varios botones uno al lado del otro y no caben en pantallas pequeñas, por lo tanto, se rompen y se ajustan a otra línea, simplemente agregue btn-xs-block o btn-sm-block (o en casos raros uno de otro) clases) a sus botones y serán de ancho completo y se apilarán en pantallas pequeñas:

<button class="btn btn-default btn-xs-block" type="button">Button 1</button>
<button class="btn btn-default btn-xs-block" type="button">Button 2</button>

CSS para Bootstrap 3:

@media (max-width: 767px) {
    .btn-xs-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-xs-block,
    input[type="reset"].btn-xs-block,
    input[type="button"].btn-xs-block {
        width: 100%;
    }
    .btn-block + .btn-xs-block,
    .btn-xs-block + .btn-block,
    .btn-xs-block + .btn-xs-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .btn-sm-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-sm-block,
    input[type="reset"].btn-sm-block,
    input[type="button"].btn-sm-block {
        width: 100%;
    }
    .btn-block + .btn-sm-block,
    .btn-sm-block + .btn-block,
    .btn-sm-block + .btn-sm-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .btn-md-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-md-block,
    input[type="reset"].btn-md-block,
    input[type="button"].btn-md-block {
        width: 100%;
    }
    .btn-block + .btn-md-block,
    .btn-md-block + .btn-block,
    .btn-md-block + .btn-md-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 1200px) {
    .btn-lg-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-lg-block,
    input[type="reset"].btn-lg-block,
    input[type="button"].btn-lg-block {
        width: 100%;
    }
    .btn-block + .btn-lg-block,
    .btn-lg-block + .btn-block,
    .btn-lg-block + .btn-lg-block {
        margin-top: 0.5rem;
    }
}

Answer 2

Agregue su clase personalizada al botón y use las consultas de medios para establecer el ancho al 100% en los dispositivos hasta su punto de interrupción. Entonces es decir

<button class"bootstrap classes custom-class></button>   

y en CSS

@media all and (max-width:480px) {
   .custom-class { width: 100%; display:block; }
}   

También puede controlar lo que está sucediendo sobre este punto de interrupción configurando consultas de medios en diferentes puntos de interrupción.

Answer 3

Para Bootstrap 4, uso esto:

# HTML
<input type="submit" class="btn btn-primary btn-block-xs-only">

# SCSS
@include media-breakpoint-only(xs) {
  .btn-block-xs-only {
    display: block;
    width: 100%;
  }
}

Consulte aquí para obtener referencia: http://v4-alpha.getbootstrap.com/layout/overview/

Answer 4

Si desea usar solo clases de arranque "nativas", puede hacer esto:

<input type="submit" 
    class="btn btn-primary 
        visible-xs-block 
        visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">

Answer 5

También puede colocar el botón en una cuadrícula, para que no tenga que escribir ningún archivo css adicional.

    <div class="row">
        <div class="col-12 col-md-2">
            <button type="submit" id="submit" class="btn btn-primary btn-block">submit</button>
        </div>

        <div class="col-0 col-md-10"></div>
    </div>