2

Estoy realizando un formulario con bootstrap y tengo problemas a la hora de redimensionar las columnas de la grid. Cuando se ven en una pantalla con una resolución grande, se ve bien. Sin embargo, cuando la hago pequeña para adaptarla a tablets o móviles, el diseño no se adapta como espero.

Este es el diseño en una pantalla normal:

Diseño original

Y este es el diseño cuando hago la pantalla pequeña, simulando la pantalla de un smartphone/tablet:

Diseño erróneo

Lo que yo querría es que el diseño fuera apilado como en esta imagen (o si los controles no pueden estar al lado del otro, pues que estén debajo, pero que por lo menos sea un diseño agradable a la vista):

Diseño final

Este es el código del formulario:

<div class="row">
    <div class="col-12"> 
        <div class="m-portlet__body m-portlet--primary" data-portlet="true" m-portlet="true">
            <div class="form-group m-form__group row">
                <div class="col-4 col-md-4">
                    <div class="form-group m-form__group row" style="display: flex; margin-left: 2px">
                        <div class="col-4 col-md-6">
                            <label>Nombre</label>
                        </div>
                        <div class="col-8 col-md-6">
                            <input type="text">
                        </div>
                    </div>
                </div>

                <div class="col-4 col-md-4">
                    <div class="form-group m-form__group row" style="display: flex; margin-left: 2px">
                        <div class="col-4 col-md-6">
                            <label>Apellido 1</label>
                        </div>
                        <div class="col-8 col-md-6">
                            <input type="text">
                        </div>
                    </div>
                </div>

                <div class="col-4 col-md-4">
                    <div class="form-group m-form__group row" style="display: flex; margin-left: 2px">
                        <div class="col-4 col-md-6">
                            <label>Apellido 2</label>
                        </div>
                        <div class="col-8 col-md-6">
                            <input type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
2
  • ¿Que versión de boostrap estás manejado?
    – farsSharp
    Commented el 9 ene. 2020 a las 16:52
  • Hola @fashSharp. La 4.0.0 Commented el 9 ene. 2020 a las 16:58

2 respuestas 2

3

Actualmente el grueso de tu página está dividido en 3 columnas que ocupan cada una de ellas 4 celdas del grid de Bootstrap. Para conseguir lo que necesitas debes hacer que cada columna pase de medir 4 celdas a 12, para que cada pareja de <label> + <input> ocupe toda la totalidad de la fila.

Así que lo que yo haría sería cambiar cada una de esas tres columnas <div class="col-4 col-md-4"> por algo como <div class="col-12 col-sm-12 col-md-4">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
    <div class="col-12"> 
        <div class="m-portlet__body m-portlet--primary" data-portlet="true" m-portlet="true">
            <div class="form-group m-form__group row">
                <div class="col-12 col-sm-12 col-md-4">
                    <div class="form-group m-form__group row" style="display: flex; margin-left: 2px">
                        <div class="col-4 col-md-6">
                            <label>Nombre</label>
                        </div>
                        <div class="col-8 col-md-6">
                            <input type="text">
                        </div>
                    </div>
                </div>

                <div class="col-12 col-sm-12 col-md-4">
                    <div class="form-group m-form__group row" style="display: flex; margin-left: 2px">
                        <div class="col-4 col-md-6">
                            <label>Apellido 1</label>
                        </div>
                        <div class="col-8 col-md-6">
                            <input type="text">
                        </div>
                    </div>
                </div>

                <div class="col-12 col-sm-12 col-md-4">
                    <div class="form-group m-form__group row" style="display: flex; margin-left: 2px">
                        <div class="col-4 col-md-6">
                            <label>Apellido 2</label>
                        </div>
                        <div class="col-8 col-md-6">
                            <input type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2
  • Esta respuesta es mucho más completa que la mia @Ferran Muñoz
    – Fergush
    Commented el 9 ene. 2020 a las 16:58
  • Es perfecto, funciona como un reloj. Gracias! Commented el 10 ene. 2020 a las 7:22
1

El problema lo tienes en las clases col-4 de cada uno de los div que contienen el label y el input:

<div class="row">
    <div class="col-12"> 
        <div class="m-portlet__body m-portlet--primary" data-portlet="true" m-portlet="true">
            <div class="form-group m-form__group row">
                <div class="col-12 col-md-12">
                    <div class="form-group m-form__group row" style="display: flex; margin-left: 2px">
                        <div class="col-4 col-md-6">
                            <label>Nombre</label>
                        </div>
                        <div class="col-8 col-md-6">
                            <input type="text">
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-12">
                    <div class="form-group m-form__group row" style="display: flex; margin-left: 2px">
                        <div class="col-4 col-md-6">
                            <label>Apellido 1</label>
                        </div>
                        <div class="col-8 col-md-6">
                            <input type="text">
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-12">
                    <div class="form-group m-form__group row" style="display: flex; margin-left: 2px">
                        <div class="col-4 col-md-6">
                            <label>Apellido 2</label>
                        </div>
                        <div class="col-8 col-md-6">
                            <input type="text">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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.