AYUDA CON VISTA EN ASP.NET MVC

Question

Hola comunidad, buen dia.

Tengo una vista con varios elementos, cada vez que coloco "col-md-6" en mi div, no me permite escribir ni seleccionar nada. Pero al dejarlo en "col-md-12" si lo hace, pero no quiero que ese elemento abarque todo el ancho, si no que lo comparta con otro elemento.

Muchas gracias de antemano.

Código:

                <div class="form-group col-md-6">
                    @Html.LabelFor(model => model.FechaInicio)
                    @Html.EditorFor(model => model.FechaInicio, new { htmlAttributes = new { @class = "form-control", @style = "width: 100%;max-width: 100%;" } })
                    @Html.ValidationMessageFor(model => model.FechaInicio, "", new { @class = "text-danger", @style = "font-size:12px" })
                </div>

Answer 1

Ese DIV, ¿está dentro de otro con class="row"?  Porque es un requisito de Bootstrap.  También lo ideal es que en una fila siempre existan las 12 columnas.  ¿Tiene otro DIV con class="col-md-6" después o antes de este?

Ah, y elimine ese style que veo allí en los htmlAttributes.

---

Jose R. MCP
Code Samples

Answer 2

Efectivamente José si lo tengo dentro de un DIV class = "row", y tambien lo completo para que existan las 12 columnas con otro div.

Ya eliminé ese Style también.

Lo raro es que funciona en otras vistas perfectamente y en esa no funciona.

Vea:

            <div class="form-row">
                <div class="form-group col-md-6">
                    @Html.LabelFor(model => model.FechaInicio)
                    @Html.EditorFor(model => model.FechaInicio, new { htmlAttributes = new { @class = "form-control", @style = "width: 100%;max-width: 100%;" } })
                    @Html.ValidationMessageFor(model => model.FechaInicio, "", new { @class = "text-danger", @style = "font-size:12px" })
                </div>
                <div class="form-group col-md-6">
                    @Html.LabelFor(model => model.FechaFin)
                    @Html.EditorFor(model => model.FechaFin, new { htmlAttributes = new { @class = "form-control", @style = "width: 100%;max-width: 100%;" } })
                    @Html.ValidationMessageFor(model => model.FechaFin, "", new { @class = "text-danger", @style = "font-size:12px" })
                </div>
            </div>

Answer 3

Estimados amigos, creo que encontré la solución a este problema, resulta que al parecer (por lo menos yo no lo sabía) primero se deben colocar todos los campos tipo:

col-md-12

y después los de las otras definiciones:

col-md-6, col-md-4     ETC

Gracias por la ayuda.

Answer 4

Suena extraño eso que comenta.  Yo puedo tener una columna de 4, luego de 6, etc.  El orden no importa.  ¿Será que usted excede las 12 columnas por cada DIV con class="row"?  Aunque en teoría Bootstrap soporta esto, si usted sabe que está poniendo más de 12 columnas, lo correcto es mover el exceso de columnas a otro div class="row".

---

Jose R. MCP
Code Samples

Answer 5

Si a mi también me parece extraño, pero intenté colocando en diferentes posiciones los elementos y esa fué la única forma de que se solucionara ese detalle. En el ejemplo que dí, alli estan las 12 columnas repartidas, cuidando de no excederme.