Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Conceptos básicos de Bootstrap Creando formularios con Bootstrap Diseños de Formulario Estructurados con la Cuadrícula

El contenido se sale de los bordes, el botón de registro se muestra tan ancho como la ventana emergente de registro.

<div class=modal fade id=registro tabindex=-1 role=dialog aria-labelledby=formulario de registro aria-hidden=verdadero>
          <div class=modal-dialog role=document>
            <div class=modal-content>
              <div class=modal-header bg-info text-white>
                <h5 class=modal-title id=exampleModalLabel>Regístrate para Full Stack Conf</h5>
                <botón type=button class=close data-dismiss=modal aria-label=Close>
                  <span aria-hidden=verdadero>&times;</span>
                </botón>
              </div>
              <div class=modal-body>
                <!-- formulario de registro -->

                <form>
                <div class=alert alert-warning alert-dismissible fade show role=alert>
                  <strong>¡Date prisa! El registro de Early Bird termina en dos días</strong> 
                  <botón type=button class=close data-dismiss=alert aria-label=Close>
                    <span aria-hidden=verdadero>&times;</span>
                  </botón>
                </div>
                    <h5 class=mb-4>Información básica</h5>
                  <div class=form-group>
                    <etiqueta para=nombre>Nombre:</etiqueta>
                    <input type=text class=form-control id=nombre>
                      </div>
                      <div class=form-group>
                    <etiqueta para=email>Correo electrónico:</etiqueta>
                    <input type=email class=form-control id=email>
                      </div>
                       <div class=form-group>
                        <etiqueta para=role>Función laboral:</etiqueta>
                        <select class=custom-select form-control id=role>
                            <option valor=desarrollador full stack js>Desarrollador Full Stack JavaScript</option>
                            <option valor=desarrollador front end>Desarrollador Front End</option>
                            <option valor=desarrollador back end>Desarrollador Back End</option>
                            <option valor=diseñador>Diseñador</option>
                            <option valor=estudiante>Estudiante</option>
                        </select>
                  </div>
                  <hr class=my-4>
                  <h5 class=mb-4>¿Qué temas te interesan más?</h5>

                   <div class=verificación de formulario>
                    <etiqueta class=custom-control custom-checkbox>
                      <input type=checkbox class=custom-control-input id=customCheck1>
                      <span class=custom-control-indicator></span>
                      <span class=custom-control-description>Marcos de JavaScript</span>
                     </etiqueta>
                    </div>
                    <div class=verificación de formulario>
                    <etiqueta class=custom-control custom-checkbox>
                      <input type=checkbox class=custom-control-input id=customCheck1>
                      <span class=custom-control-indicator></span>
                      <span class=custom-control-description>Bibliotecas de JavaScript</span>
                     </etiqueta>
                    </div>
                    <div class=verificación de formulario>
                    <etiqueta class=custom-control custom-checkbox>
                      <input type=checkbox class=custom-control-input id=customCheck1>
                      <span class=custom-control-indicator></span>
                      <span class=custom-control-description>Node.js</span>
                     </etiqueta>
                    </div>
                    <div class=verificación de formulario>
                    <etiqueta class=custom-control custom-checkbox>
                      <input type=checkbox class=custom-control-input id=customCheck1>
                      <span class=custom-control-indicator></span>
                      <span class=custom-control-description>Herramientas de compilación</span>
                     </etiqueta>
                    </div>
                    <div class=verificación de formulario>
                    <etiqueta class=custom-control custom-checkbox>
                      <input type=checkbox class=custom-control-input id=customCheck1>
                      <span class=custom-control-indicator></span>
                      <span class=custom-control-description>ES2015</span>
                     </etiqueta>
                    </div>  
                  </div>

                  <hr class=mb-4>
                  <h5 class=mb-4>Información de pago</h5>

                  <div class=fila>
                      <div class=col-lg-6 form-row>
                        <etiqueta para=cc-num>Número de tarjeta:</etiqueta>
                        <input class=form-control id=cc-num type=text>
                      </div>

                      <div class=col-lg>
                        <etiqueta para=zip>Código postal:</etiqueta>
                        <input class=form-control id=zip type=text>
                      </div>

                      <div class=col-lg>
                        <etiqueta para=cvv>CVV:</etiqueta>
                        <input class=form-control id=cvv type=text>
                      </div>
                    </div>
                    <div class=form-row>
                        <etiqueta class=col-lg-12>Fecha de vencimiento:</etiqueta>
                        <div class=form-group col-lg-8>
                            <select class=custom-select form-control id=exp-month>
                              <option valor=1>1 - Enero</option>
                              <option valor=2>2 - Febrero</option>
                              <option valor=3>3 - Marzo</option>
                              <option valor=4>4 - Abril</option>
                              <option valor=5>5 - Mayo</option>
                              <option valor=6>6 - Junio</option>
                              <option valor=7>7 - Julio</option>
                              <option valor=8>8 - Agosto</option>
                              <option valor=9>9 - Septiembre</option>
                              <option valor=10>10 - Octubre</option>
                              <option valor=11>11 - Noviembre</option> 
                              <option valor=12>12 - Diciembre</option>
                            </select> 
                        </div>

                        <div class=form-group col-lg>
                           <select class=custom-select form-control id=exp-year>
                              <option valor=2016>2016</option>
                              <option valor=2017>2017</option>
                              <option valor=2018>2018</option>
                              <option valor=2019>2019</option>
                              <option valor=2020>2020</option>
                            </select>  
                        </div>
                    </div>
                    <hr class=mb-4>
                    <botón type=submit class=btn btn-primary btn-lg>Registrarse</botón>
                </form><!-- /formulario de registro -->
                </div>
            </div>
          </div>
        </div>

Moderador editado: Markdown añadido para que el código se renderice correctamente en los foros.

Jennifer Nordell
sello-máscara
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Profesor de Treehouse

¡Hola! Nos has mostrado tu HTML, pero es tu CSS el que lo está estilizando. La forma más fácil de mostrarnos todo tu código es hacer un captura de pantalla de tu espacio de trabajo y publicarlo aquí. Esto nos permitirá bifurcar tu espacio de trabajo y echar un vistazo.

1 Respuesta

¡Gracias! Ya encontré mi error: ¡una etiqueta de cierre div de más antes de Información de pago!