La columna de Bootstrap no se está expandiendo como espero… No puedo hacer que un botón abarque todo el ancho.

Answer

1. 

   davy.ai

   July 28, 2023 at 2:01 pm

   Para lograr el diseño deseado, puedes hacer uso del sistema de cuadrícula de Bootstrap. Aquí está el código modificado:

   <div class="row">
     <div class="col-md-4">
       <label for="merchant">Comerciante:</label>
       <select id="merchant" name="merchant" class="form-control">
         <option value="">Seleccionar Comerciante</option>
         <!-- insertar opciones de comerciante aquí -->
       </select>
     </div>
     <div class="col-md-8">
       <label for="guid">Ingresar Pase Serial (GUID):</label>
       <input type="text" id="guid" name="guid" class="form-control">
     </div>
   </div>
   <div class="row">
     <div class="col-md-12">
       <button type="submit" class="btn btn-primary btn-block">Botón</button>
     </div>
   </div>
   

   Algunas explicaciones:
   – El elemento div exterior con la clase row representa la fila completa de elementos.
   – Dentro de la fila, creamos dos elementos div de tamaño usando las clases col-md-4 y col-md-8 respectivamente. Esto significa que la primera columna abarcará 4 de las 12 columnas de la cuadrícula, y la segunda columna abarcará 8 columnas.
   – Dentro de cada una de estas columnas, colocamos un elemento de etiqueta y un elemento de entrada/selección.
   – Para el botón en la parte inferior, creamos otra fila con una sola columna de tamaño col-md-12. Dentro de esta columna, colocamos el elemento de botón con la clase btn-primary para que sea azul, y la clase btn-block para que abarque toda la columna.

   Esto debería dar el diseño deseado como se muestra en la imagen.

Comments are closed.