0

tengo un form con Cards de un framework basado en Bootstrap, como puede verse las primeras 2 cards estan una bajo otra. El problema es con las .card-group (que al estar 2 cards juntas) el espacio entre las cards separadas y las card group es notorio. ¿Como reduzco el espacio entre "Discapacidades" y el card group?

Adjunto screenshot de los espacios que quiero reducir para que queden como el espacio entre "nombre" y "discapacidades": 
Adjunto screenshot de los espacios que quiero reducir para que queden como el espacio entre "nombre" y "discapacidades":

<!-- Form -->
      <form name="gg" class="form-horizontal" role="form">
         <center>
            <p>
            <div class="card text-center md-form form-sm mb-1" style="max-width: 10rem; height: 4.3rem;">
               <!-- Header -->
               <div class="card text-white text-center success-color" style="height: 2rem;">Nombre:</div>
               <!-- Small input -->
               <input type="text" class="form-control text-center" id="hh" name="hh" value="" placeholder="colocar">
            </div>
            </p>
            <!-- Card 1-->
            <div class="card card-cascade text-center" style="width: 15rem; height: 4rem;">
               <!-- Header -->
               <div class="card text-white text-center danger-color mb-2" style="height: 1.7rem;">Discapacidades:</div>
               <div class="d-flex justify-content-center">
                  <!-- Material inline 1 -->
                  <center>
                     <div class="form-check form-check-inline">
                        <input type="checkbox" class="form-check-input" id="no">
                        <label class="form-check-label text-dark" for="no">NO</label>
                     </div>
                     <!-- Material inline 2 -->
                     <div class="form-check form-check-inline">
                        <input type="checkbox" class="form-check-input" id="si">
                        <label class="form-check-label text-dark" for="si">SI</label>
                     </div>
               </div>
            </div>
            <!-- Card -->
            <!-- Grupo 1 -->
            <div class="card-group" style="justify-content: center">
               <!-- Card dia -->
               <div class="card text-center md-form form-sm mb-1" style="max-width: 10rem; height: 4.3rem;">
                  <!-- Header -->
                  <div class="card text-white text-center secondary-color-dark" style="height: 2rem;">dia:</div>
                  <input type="number" name="rr" class="form-control form-control-sm text-center" maxlength="2" value="01">
               </div>
               <!-- Card -->
               <!-- Card mes -->
               <div class="card text-center md-form form-sm mb-1" style="max-width: 10rem; height: 4.3rem;">
                  <!-- Header -->
                  <div class="card text-white text-center secondary-color-dark" style="height: 2rem;">mes:</div>
                  <input type="number" id="ww" class="form-control form-control-sm text-center" maxlength="2" value="02" name="ww">
               </div>
               <!-- Card -->
            </div>
            <!-- Grupo 1 -->
            <!-- Grupo 2 -->
            <div class="card-group" style="justify-content: center">
               <!-- Card gg -->
               <div class="card card-cascade text-center md-form mb-1" style="max-width: 10rem; height: 4.2rem;">
                  <!-- Header -->
                  <div class="card text-white text-center primary-color-dark" style="height: 2rem;">sangre:</div>
                  <div class="d-flex align-items-center">
                  <select class="mdb-select colorful-select dropdown-success" name="sangress">
                     <option value="tipo">tipo</option>
                     <option value="negativo">O+</option>
                     <option value="positivo">O-</option>
                  </select>
               </div>
               </div>
               <!-- Card -->
               <!-- Card Año -->
               <div class="card card-cascade text-center md-form mb-1" style="max-width: 10rem; height: 4.2rem;">
                  <!-- Header -->
                  <div class="card text-white text-center primary-color-dark" style="height: 2rem;">Alergias:</div>
                  <div class="d-flex align-items-center">
                  <select class="mdb-select colorful-select dropdown-success" name="alergiass">
                     <option value="alergias">Elija</option>
                     <option value="si">si</option>
                     <option value="no">no</option>
                  </select>
               </div>
               </div>
               <!-- Card -->
            </div>
            <!-- Grupo 2 -->
      <!-- Form -->

Ya he probado agregabdo el margin-bottom dentro de mi style.css pero no funcionó.

2
  • Podrías incluir el bloque en que cargas las hojas de estilo. Sería bueno poder verificar que style.css carga después de haber cargado los estilos de bootstrap. Adicionalmente muestra los estilos que estás tratando de sobreescribir.
    – quevedo
    Commented el 10 oct. 2020 a las 17:46
  • @quevedo muchas gracias, pero ya lo solucioné Commented el 11 oct. 2020 a las 3:07

1 respuesta 1

0

Solucionado. Modifiqué el archivo bootstrap.min.css en el margin-bottom y agregando la variable margin-top junto a cierto numero de px.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.