2

el día de hoy tengo una duda sobre el diseño de un formulario que estoy haciendo. Estoy diseñando en Angular, un formulario en HTML y Bootstrap, solo que "Tag" y requerido no están acomodados como "ID Remedy" y "Formulario". Por ello les pido su ayuda para dar arreglo solo a ese único detalle. Envió una imagen del formulario:

introducir la descripción de la imagen aquí

Y este es el código con el que estoy trabajando:

<div class="form-group row justify-content-center">
      <label for="tag" class="col-form-label">Tag</label>
      <div class="col-sm-3">
        <input formControlName="tag" placeholder="Ingrese un tag" name="tag" type="text" class="form-control" id="tag" required/>
      </div>
    </div>

    <div class="form-group row justify-content-center">
      <label for="id_remedy" class="col-form-label">ID Remedy</label>
      <div class="col-sm-3">
        <input formControlName="id_remedy" class="form-control" type="text" name="id_remedy" placeholder="Ingrese el ID Remedy">
      </div>
    </div>

    <div class="form-group row justify-content-center">
      <label for="formulario" class="col-form-label">Formulario</label>
      <div class="col-sm-3">
        <select formControlName="formulario" class="form-control" name="formulario">
          <option value="WL">WL</option>
          <option value="HELP">HELP</option>
        </select>
      </div>
    </div>

    <div class="form-group row justify-content-center">

      <div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox">

<div class="form-group row justify-content-center">
    <label for="formulario" class="col-form-label">
        <span>Requerido</span>
        <input type="checkbox" formControlName="requerido" name="requerido" value="C" checked/>
        C
        <input type="checkbox" formControlName="requerido" name="requerido" value="U"/>
        U
        <input type="checkbox" formControlName="requerido" name="requerido" value="A"/>
        A
    </label>
</div>
3
  • hay un par de div sin cerrar?
    – gbianchi
    Commented el 27 feb. 2019 a las 19:25
  • Ah es que lo tengo dentro de un "card" pero este no lo añadí, copie unos div de mas supongo...
    – Reinos Ric
    Commented el 27 feb. 2019 a las 20:53
  • Pone exactamente tu view, o un ejemplo identico que replique tu problema. Si no, vas a recibir respuestas que no van a solucionar tu problema
    – gbianchi
    Commented el 27 feb. 2019 a las 21:00

1 respuesta 1

1

Saludos podrias hacer algo asi:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>EJEMPLO</title>
  </head>
  <body>

<form>
  <div class="form-group row">
    <label for="tag" class="col-sm-2 col-form-label">TAG</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="tag" placeholder="Ingrese el tag">
    </div>
  </div>
  <div class="form-group row">
    <label for="id_remedy" class="col-sm-2 col-form-label">ID Remedy</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="id_remedy" placeholder="ID Remedy">
    </div>
  </div>
  <div class="form-group row">
    <label for="id_remedy" class="col-sm-2 col-form-label">Formulario</label>
    <div class="col-sm-10">
      <select name="formulario" id="formulario" class="form-control">
          <option value="WL">WL</option>
          <option value="HELP">HELP</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <div class="col-sm-2">Requerido</div>
    <div class="col-sm-6">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="requerido">
        <label class="form-check-label" for="requerido">
         C
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="requerido">
        <label class="form-check-label" for="requerido">
         U
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="requerido">
        <label class="form-check-label" for="requerido">
         A
        </label>
      </div>
    </div>
  </div>
  
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Aceptar</button>
    </div>
  </div>
</form>




    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Como ves es algo basico de bootstrap, para mayor referencia te sugiero revisar la documentacion:

form Bootstrap Espero te sirva y guie..!!

3
  • Hola Diego, se me olvido poner que tanto el texto como los campos (input, checkbox y select) no estén separados, ¿no se si me entiendas?....
    – Reinos Ric
    Commented el 27 feb. 2019 a las 20:52
  • a que te refieres con separados ? Commented el 28 feb. 2019 a las 0:42
  • te sugiero revisar la parte de los formularios en bootstrap: getbootstrap.com/docs/4.3/components/forms Commented el 28 feb. 2019 a las 0:42

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.