Cambio de Bootstrap 4 tamaño de casilla de verificación

Hay una manera de cambiar Levanta a 4 beta casilla de verificación tamaño a uno más grande?

Casi me trató de alterar los estilos, pero esto no funcionó.

Gracias!

InformationsquelleAutor Bezelinjah | 2018-01-17

4 Kommentare

  1. 27

    Actualmente hay un problema con esto y me informó que Bootstrap. Hasta que se fija a hacer lo siguiente:

    Primero de todos, el uso de la form-control-lg clase. Una vez que el problema se soluciona utilizando la clase será todo lo que usted necesita.

    Hasta que el problema se corrigió agregue el siguiente código css:

    .custom-control-label::before, 
    .custom-control-label::after {
        top: .8rem;
        width: 1.25rem;
        height: 1.25rem;
    }
    

    Aquí un trabajo completo ejemplo de código:

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    
    <style>
    .custom-control-label::before, 
    .custom-control-label::after {
    top: .8rem;
    width: 1.25rem;
    height: 1.25rem;
    }
    </style>
    
    
    <div class="custom-control form-control-lg custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>

    • Yep. Funciona a la perfección. Gran trabajo. Gracias!
    • Por favor, haga clic en «aceptar» junto a mi respuesta. 🙂
    • Lo siento compañero. Yo no sabía que esto era importante para Usted, si yo sabía que yo iba a hacer hace un par de días!
    • Pregunta. ¿Por qué esta casilla se pone gris de fondo?
    • Bien, ese es el estilo por defecto de Arranque.
    • Bien por defecto casilla de verificación fondo blanco. Alguna idea de cómo se puede cambiar la ‘gran opción de’ bg blanco?
    • Con este estilo en particular, el real HTML casilla de verificación que está oculto y un arranque de estilo se aplica a la cosa. Publicar un nuevo Bootstrap 4 pregunta para que yo pueda ganar un par de puntos en responder. 🙂
    • Seguro. Hay que ir stackoverflow.com/questions/48373119/…
    • puede agregar un enlace al tema en el Bootstrap tracker?
    • En mi caso (bootstrap vue rc12 + bootstrap 4.2.1) fue necesario el uso de !important
    • Actualización: La capacidad de cambiar el tamaño de un checkbox personalizado probablemente será lanzado en Bootstrap 5: github.com/twbs/bootstrap/issues/27803#issuecomment-450462476
    • El uso de este stackoverflow.com/questions/57805394/…

  2. 6

    Para el Bootstrap 4.2.1 usuarios esta es la forma en que yo tengo que trabajar.

    He introducido una nueva clase custom-control-lg de manejar.

    CSS:

    .custom-control-lg .custom-control-label::before,
    .custom-control-lg .custom-control-label::after {
        top: 0.1rem !important;
        left: -2rem !important;
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    .custom-control-lg .custom-control-label {
        margin-left: 0.5rem !important;
        font-size: 1rem !important;
    }

    HTML:

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
    
    <div class="card m-3">
    <div class="card-body">
        <div class="custom-control-lg custom-control custom-checkbox">
            <input class="custom-control-input" id="checkbox-large" type="checkbox"/>
            <label class="custom-control-label" for="checkbox-large">
                Checkbox label for large input!
            </label>
        </div>
        <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="checkbox-small" type="checkbox"/>
            <label class="custom-control-label" for="checkbox-small">
                Checkbox label for small input!
            </label>
        </div>
    </div>
    </div>

  3. 5

    Me he acercado a este un poco diferente. Agregue el siguiente código CSS personalizado.

    .checkbox-1x {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
    }
    .checkbox-2x {
        transform: scale(2);
        -webkit-transform: scale(2);
    }
    

    A continuación, escribir la entrada como esta: input type=»checkbox» class=»checkbox-1x»

  4. 0

    Si la importación de secs de Bootstrap puede reemplazar la variable $custom-control-indicator-size.

    $custom-control-indicator-size: 1.75rem;
    

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea