0

Tengo un formulario de pago en mi página, que cree con clases de bootstrap, pero aparece una línea que no logro sacar, que se sale hacia los costados del form, quiero poder achicarla para que solo sea divisoria de la sección, pero sin salirse hacia los costados.

Adjunto código HTML del formulario y el CSS del archivo, ¿alguna solucion? ¿puede ser que sea problema de los divs? estoy empezando a usar bootstrap y a veces se me generan estos problemas, creo que para alguien con conocimientos es fácil de solucionar.

.bg-image {
    background-image: url(https://images6.alphacoders.com/989/thumb-1920-989983.jpg);
    height: 50vh;
}

h1 {
    text-align: center;
    padding-top: 5px;
}
h3 {
    text-align: center;
}
h3 a:hover{
    color: white;
}
h4 {
    color: #eeb125;
}
<body>
    <!--NAVBAR-->
    <div class="d-flex  bd-highlight">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                <a class="navbar-brand" href="home.html" style="font-family: Antonio, sans-serif;">
                    <img class="d-inline-block align-text-top" src="../assets/logos/amarillo transparente.png" alt="logo 'Soy Bostero'" width="40" height="40">
                        Soy Bostero
                </a>
            </div>
            <ul class="nav navbar-nav d-flex flex-row gap-4">
                <li><a href="historial.html">Mis compras</a></li>
                <li><a href="datos.html">Mis datos</a></li>
                <li><a href="pagos.html">Pagos</a></li> 
            </ul>
                <ul class="nav navbar-nav d-flex flex-row gap-4">
                    <li class="navbar-right d-flex"><button class="boton-nav" type="button" data-bs-toggle="modal" data-bs-target="#ModalForm">
                        Inicia sesion
                      </button></li>
                    <li class="navbar-right d-flex"><button class="boton-nav" type="button" data-bs-toggle="modal" data-bs-target="#modalRegisterForm">
                        Quiero asociarme
                      </button></li>
                </ul>
            </div>
        </nav>
    </div>
    <!--Banner de compra-->
    <div class="bg-image">
        <h1>Obtene tu popular para el proximo partido</h1>
        <h3><a href="#compraform" data-toggle="modal" data-target="#compraform">Boca Juniors vs Colo Colo (9.08.2023)</a></h3>
    </div>
    <div class="container-fluid">
        <div class="container-fluid" style="background-color: #002b87; padding-right: 0px; margin-right: 0px;">
          <h1 class="noticias">Tu historial de compras</h1>
    </div>
    </div>
    <!--Form comprar-->
    <div class="modal fade" id="compraform" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Completa tu compra</h4>
      </div>
      <form action="#" class="credit-card-div">
        <div class="panel panel-default" >
         <div class="panel-heading">
              <div class="row ">
                      <div class="col-md-12">
                         <span class="help-block  small-font">Numero</span>
                          <input type="text" class="form-control"/>
                      </div>
                  </div>
             <div class="row ">
                      <div class="col-md-3 col-sm-3 col-xs-3">
                          <span class="help-block small-font" >Mes de vto</span>
                          <input type="text" class="form-control" placeholder="MM" maxlength="2"/>
                      </div>
                 <div class="col-md-3 col-sm-3 col-xs-3">
                          <span class="help-block small-font" >Año de vto</span>
                          <input type="text" class="form-control" placeholder="YY" max="2" />
                      </div>
                <div class="col-md-3 col-sm-3 col-xs-3">
                          <span class="help-block small-font" >CCV</span>
                          <input type="text" class="form-control" placeholder="CCV" maxlength="3" minlength="3"/>
                      </div>
                 <div class="col-md-3 col-sm-3 col-xs-3">
        <img src=".." class="img-rounded" />
                 </div>
                  </div>
             <div class="row ">
                      <div class="col-md-12 pad-adjust">
                        <span class="help-block small-font">Nombre del titular</span>
                          <input type="text" class="form-control"/>
                      </div>
                  </div>
             <div class="row">
        <div class="col-md-12 pad-adjust">
            <div class="checkbox">
            <label>
              <input type="checkbox" checked class="text-muted">Guardar datos para proximas compras</input>
            </label>
          </div>
        </div>
             </div>
               <div class="row ">
                <div class="modal-footer d-flex justify-content-center">
                    <button type="submit" data-dismiss="modal">PAGAR</button>
                  </div>
                </div>
                </div>
             </div>
            </div>
  </div>
</div>
</div>
<script src="../js/bootstrap/bootstrap.bundle.js"></script>
</body>

Antes del botón enviar es donde aparece la linea, se sale hasta afuera

Antes del botón enviar es donde aparece la línea, se sale hasta afuera.

1
  • 1
    ¿Por qué revertiste la edición a tu pregunta? Claramente habían mejorado su formato...
    – padaleiana
    Commented el 11 jul. 2023 a las 18:54

1 respuesta 1

0

Tu estructura HTML tiene varias inconsistencias, tienes contenedores sin cerrar, por lo tanto al momento de renderizar se muestra de una manera no deseada, te dejo un ejemplo con el form que proporcionaste.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Abrir Modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Título del Modal</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal Body -->
          <div class="modal-body">
            <form action="#" class="credit-card-div">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="row ">
                    <div class="col-md-12">
                      <span class="help-block  small-font">Numero</span>
                      <input type="text" class="form-control" />
                    </div>
                  </div>
                  <div class="row ">
                    <div class="col-md-3 col-sm-3 col-xs-3">
                      <span class="help-block small-font">Mes de vto</span>
                      <input type="text" class="form-control" placeholder="MM" maxlength="2" />
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-3">
                      <span class="help-block small-font">Año de vto</span>
                      <input type="text" class="form-control" placeholder="YY" max="2" />
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-3">
                      <span class="help-block small-font">CCV</span>
                      <input type="text" class="form-control" placeholder="CCV" maxlength="3" minlength="3" />
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-3">
                      <img src=".." class="img-rounded" />
                    </div>
                  </div>
                  <div class="row ">
                    <div class="col-md-12 pad-adjust">
                      <span class="help-block small-font">Nombre del titular</span>
                      <input type="text" class="form-control" />
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12 pad-adjust">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" checked class="text-muted">Guardar datos para proximas compras</input>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>

          <!-- Modal Footer -->
          <div class="modal-footer">
              <button type="submit" data-dismiss="modal">PAGAR</button>
          </div>

        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

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.