0

Gente, buenas!!

Estoy intentando realizar una ventana modal con el siguiente formato con bootstrap 4.6:

introducir la descripción de la imagen aquí

Pero al realizar el código, la ventana se muestra de la siguiente manera y no entiendo por que:

introducir la descripción de la imagen aquí

Por ejemplo la X de cerrar la ventana no queda con formato, las rows quedan todas juntas sin espacios...

Me podrán ayudar?

El código es el siguiente:

<!-- Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#trackerModal"> 
    <i class="fa fa-plus"></i> Proyecto
</button>

<div class="modal fade" id="trackerModal" tabindex="-1" aria-labelledby="nuevoProyecto" aria-hidden="true">
  <div class="modal-dialog" style="min-width: 75%;">
    <!--Con el min-width manejo el ancho del modal -->
    <div class="modal-content">

      <div class="modal-header">
        <h2 class="modal-title" id="nuevoProyecto">Nuevo Proyecto</h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span>&times;</span>
                </button>
      </div>

      <div class="modal-body">
        <div class="container-fluid">
          <form>
            <div class="row">
              <div class="form-group col-md-6">
                <label for="nombre">Nombre</label>
                <input type="text" class="form-control" id="nombre" required>
              </div>
              <div class="form-group col-md-6">
                <label for="descripcion">Descripción</label>
                <input type="text" class="form-control" id="descripcion" required>
              </div>
            </div>
            <div class="row">
              <div class="form-group col-md-6">
                <label for="observaciones">Observaciones</label>
                <input type="text" class="form-control" id="observaciones">
              </div>
              <div class="form-group col-md-3">
                <label for="fecha_ini">Fecha Inicio</label>
                <input type="date" class="form-control" id="fecha_ini" required>
              </div>
              <div class="form-group col-md-3">
                <label for="fecha_fin">Fecha Fin</label>
                <input type="date" class="form-control" id="fecha_fin">
              </div>
            </div>
            <div class="row">
              <div class="form-group col-md-2">
                <label for="site">Site</label>
                <select class="custom-select mr-sm-2" id="site" required>
                  <option selected>Elegir Site...</option>
                  <option value=""></option>
                </select>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!--.modal-body-->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Agregar</button>
      </div>
    </div>
    <!--.modal-content-->
  </div>
  <!--.modal-dialog-->
</div>
<!--.modal-->   
2
  • prueba usar la clase "form-control" en vez de "form-group"
    – David081
    Commented el 15 jul. 2022 a las 11:35
  • No, me lo destruye todo :( Commented el 15 jul. 2022 a las 13:28

1 respuesta 1

0

He corrido el código que pasaste y obtuve el mismo error. Lo que me percaté es que no estás enlazando las librerías CDN de la versión de bootstrap que estás utilizando.

Dentro de tu etiqueta <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

Dentro de tu etiqueta <body> (justo debajo del código del modal):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Puedes ver los resultados en este proyecto que tengo preparado.

Para evitar estos posibles errores en tus futuros proyectos, asegúrate ver la guía de introducción de la versión de Bootstrap que estés utilizando, comenzando por instalar los CDN y posteriormente el código que desees, saludos.

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.