1

Tengo un formulario en un modal, que tiene mucho espacio hacia la derecha y no sé como corregir introducir la descripción de la imagen aquí

<div class="modal fade" id="modal_para_editar" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Editar</h4>
            </div>

                <div class="form-horizontal">                    
                    <div class="modal-body">
                        <div class="form-group">
                            @Html.LabelFor(model => model.nombre, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.nombre, new { htmlAttributes = new { @class = "form-control" } })                                
                            </div>
                        </div>                                                                                          
                    </div> <!--cierra body-->
                    <div class="modal-footer">
                        <div class="form-group">
                            <div class="col-md-10">
                                <input type="button" value="Cerrar" class="btn btn-default" data-dismiss="modal" />
                            </div>
                        </div>
                    </div> <!--cierra footer-->
                </div><!--cierra form-horizontal-->         
        </div> <!--cierra modal content-->
    </div> <!--cierra modal-dialog-->
</div> <!--cierra modal_para_editar-->

Cuando presento el mismo formulario dentro de la vista principal si se ajusta y no asigna el espacio como lo hace en la ventana modal

2
  • 1
    Cambia el col-md-10 por col-md-12 o simplemente quítalo. el 23 nov. 2019 a las 19:15
  • lo que dice @JheymanMejia es cierto, también puesdes dejar el col-md-10 pero añadirle una clase margin: 0 auto; float: none; para que esté centrado.
    – Pavlo B.
    el 13 dic. 2019 a las 10:29

1 respuesta 1

0

Tienes que darle el ancho de las columnas que necesitas directamente al elemento que deseas colocar. Ten en cuenta que los paddings acumulados del modal, form-group, col, etc te restan espacio por lo que en este caso tendrás que dar un col-md-9 y no col-md-10 para que todo quede en una líena, si es eso lo que quieres:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_para_editar">boton</button>
<div class="modal fade" id="modal_para_editar" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Editar</h4>
            </div>

                <div class="form-horizontal">                    
                    <div class="modal-body">
                        <div class="form-group">
                            @Html.LabelFor(model => model.nombre, htmlAttributes: new { @class = "control-label col-12 col-md-2" })

                                @Html.EditorFor(model => model.nombre, new { htmlAttributes = new { @class = "form-control col-12 col-md-9" } })                                
                        </div>                                                                                          
                    </div> <!--cierra body-->
                    <div class="modal-footer">
                        <div class="form-group">
                            <div class="col-auto">
                                <input type="button" value="Cerrar" class="btn btn-default" data-dismiss="modal" />
                            </div>
                        </div>
                    </div> <!--cierra footer-->
                </div><!--cierra form-horizontal-->         
        </div> <!--cierra modal content-->
    </div> <!--cierra modal-dialog-->
</div> <!--cierra modal_para_editar-->

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.