0

estoy haciendo un formulario responsivo con bosstrap 4 pero no logro resolver un problema:

Quiero hacer este formulario: introducir la descripción de la imagen aquí

Y lo responsivo cuando reduzca el tamaño del navegador se vea así introducir la descripción de la imagen aquí

Pero con mi código obtengo esto y se descuadra y desalinea introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

¿alguien sabe cómo podría solucionarlo?

Nota: los colores de fondo, solo son para identificar los tamaños de los div

Código: https://codesandbox.io/s/stoic-surf-y755v?file=/src/app/app.component.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container-fluid">
  <form>
      <div class="form-group row" style="background-color: orchid">
          <div class="col-7 my-auto" style="background-color: lightgrey;">
              <div class="form-group row">

                <!-- <div class="form-group row"> -->
                    <label class="col-2 col-form-label text-right" style="background-color: palegreen;">Valor1:</label>
                    <div class="col">
                        <input class="form-control" type="text">
                    </div>
                <!-- </div> -->
                
                <!-- <div class="form-group row"> -->
                    <label class="col-2 col-form-label text-right" style="background-color: palegreen;">ValorCual2:</label>
                    <div class="col">
                        <input class="form-control" type="text">
                    </div>
                <!-- </div> -->
                  
              </div>
          
          </div>
          <div class="col" style="background-color:lightyellow">Necesito este espacio</div>
          
          <div class="col" style="background-color: moccasin">Otro Form Aquí</div>
      </div>

      <div class="form-group text-center mt-5">
          <button type="button" class="btn btn-outline-primary col-md-2">Aceptar</button>
      </div>

  </form>
</div>

2
  • Tienes varias imágenes ahí y no sé realmente qué es lo que quieres, ¿no es más fácil decir "quiero esto, pero tengo esto"? ¿Cuál es el resultado final al que quieres llegar? ¿Porqué quitas y pones filas? Puedes editar tu pregunta para hacerla más clara. Commented el 25 abr. 2020 a las 1:11
  • @JheymanMejia el resultado que quiero son las 2 primeras imágenes pero con el código que tengo me pasa lo de la 2 últimas imágenes. Commented el 25 abr. 2020 a las 2:53

1 respuesta 1

0

creo que lo que estas buscando es algo así:

<form>
  <div class="form-group row" style="background-color: orchid">
      <div class="col-7 my-auto" style="background-color: lightgrey;">
          <div class="form-group row">

              <div class="col-12 col-lg-6 row mt-1 mb-1 d-flex align-items-center">
                <label class="col-3 text-center m-0" style="background-color: palegreen;">Valor1:</label>
                <input class="col-9 form-control " type="text">
              </div>
              <div class="col-12 col-lg-6 row mt-1 mb-1 d-flex align-items-center">
                <label class="col-3 text-center m-0" style="background-color: palegreen;">Valor2:</label>
                <input class="col-9 form-control" type="text">
              </div>
          </div>

      </div>
      <div class="col" style="background-color:lightyellow">Necesito este espacio</div>

      <div class="col" style="background-color: moccasin">Otro Form Aquí</div>
  </div>

  <div class="form-group text-center mt-5">
      <button type="button" class="btn btn-outline-primary col-md-2">Aceptar</button>
  </div>

Explicación:

A los 'div' que encapsulan a los 'label' y 'input' le asigno un col-12 para que cuando el ancho de la pagina sea de menor a 960px tome el ancho completo del formulario. Añadi un col-lg-6 para que cuando la pagina tenga un ancho mayor a 960px, cada 'div' tome la mitad del ancho del 'form' y ambos esten alineados horizontalmente. Ademas añadí d-flex align-items-center para que los elementos internos de estos 'div' esten alineados al centro verticalmente (para que quede mas prolijo).

Agregue unos margenes para que quede mas prolijo.

Si queres saber mas sobre cuando usar md, lg, sm, etc. te sugiero que mires el siguiente link de su documentación: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

4
  • Gracias por la respuesta, pero necesito que haga lo de las 2 primeras imágenes, que normal estén en una sola línea los 2, y cuando reduzca en tamaño del explorer, se hagan 2 fila sin que se deformen Commented el 25 abr. 2020 a las 3:01
  • Disculpa, publique y tenia unos errores. cambie el col-md-6 por col-lg-6, para que cuando tu pagina sea menor a 960px ubique los dos div uno abajo del otro. Espero que te sirva saludos. Commented el 25 abr. 2020 a las 3:25
  • Hasta cuando tu pagina tenga menos de 500px de ancho se va a deformar. Si queres puedo adaptarte el codigo para que se adapte a anchos menores de 500px. Commented el 25 abr. 2020 a las 3:28
  • Muchas gracias amigo, ya con tu código funcionó perfectamente, gracias por el apoyo, ya estoy aprendiendo más sobre boostrap 4 ;) Commented el 26 abr. 2020 a las 0:37

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.