equal - div css aspect ratio

Bootstrap Rows?

Question

Tengo un formulario y estoy confundido con filas.

¿Dónde debo poner en filas? ¿Los necesito? ¿Necesito uno para un modal? ¿Uno para el formulario completo o cada formulario de entrada?

Esto es lo que tengo:

<div class="container">
  <div id="modal" class="modal fade">
  //modal stuff
  </div><!-- /.modal -->

  <h1>Title Here</h1>
  <form id="content-add-form" class="form-horizontal" role="form" name="content-add-form" enctype="multipart/form-data">

   <div class="form-group">
        <label for="title" class="col-md-2 control-label">Title:</label>
        <div class="col-md-4">
            <input name="title" type="text" class="form-control" placeholder="Title">
        </div>
    </div>

    <div class="form-group">
        <label for="date" class="col-md-2 control-label">Date:</label>
        <div class="col-md-2">
            <div class=''input-group date'' id=''date-picker''>
                <input type=''text'' class="form-control" name="date" value="{{ date("d-m-Y") }}" data-format="dd-MM-yyyy" readonly/>
                <span class="input-group-btn">
                    <button class="btn btn-default datepicker-invoker" type="button"><i class="icon-calendar"></i></button>
                </span>
            </div>
        </div>
    </div>


</form>

Answer 1

Creo que puedo ver la confusión. Un formulario tiene muchos campos, en diferentes filas, pero no necesariamente utilizaría una "fila" de Bootstrap para cada uno.

Lo que podemos hacer es usar solo una "fila" de Bootstrap, y luego colocar cada par de etiqueta / campo en su propia div. Dentro de ese div, la etiqueta y el campo tienen sus propios divs, con la información de Boostrap. Esto nos dará un formulario con muchas filas y dará el efecto de envoltura deseado que está esperando con Bootstrap.

El siguiente ejemplo es un formulario MVC. No deje que la sintaxis de MVC lo confunda: puede reemplazar @ Html.Label & Editor con etiquetas HTML y campos de entrada.

<div class="container">
    <div class="row">

    @using (Html.BeginForm("MyAction", "MyController", Model))
        {
        @Html.AntiForgeryToken()
            <div class="form-group">
                <div class="col-md-4">
                    @Html.LabelFor(model => model.PersonFirstName)
               </div>
                <div class="col-md-8">
                    @Html.EditorFor(model => model.PersonFirstName, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your first name" } })
                    @Html.ValidationMessageFor(model => model.PersonFirstName, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    @Html.LabelFor(model => model.PersonSurname)
               </div>
                <div class="col-md-8">
                    @Html.EditorFor(model => model.PersonSurname, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your surname" } })
                    @Html.ValidationMessageFor(model => model.PersonSurname, "", new { @class = "text-danger" })
                </div>
            </div>
        }
    </div>
</div>

Answer 2

Necesita las filas porque, si no sigue la estructura definida en la documentación,

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">form</div>
    </div>
</div>

-La rejilla no se comportará como se espera. Hay un par de maneras de solucionar esto, ninguna de ellas ideal.

1. Puede envolver el formulario alrededor del contenedor y luego crear toda la estructura de la cuadrícula dentro de ese contenedor y colocar los grupos de formularios dentro de las columnas. Es posible que tengas que establecer el ancho del formulario en 100%. Otra limitación es que los grupos de formularios deben estar dentro de las columnas y no pueden envolverse. Por lo tanto, si realmente necesita controlar los anchos dentro de los grupos de formularios, entonces necesita crear un nuevo contenedor dentro del grupo. Esto se maneja con bastante facilidad si envuelve los contenedores en columnas con factores de 2, 4 o 6, entonces está claro que las columnas en su nuevo contenedor se alinearán con las columnas en el contenedor externo.
2. Envíe sus entradas utilizando javascript. Entonces no necesitas un formulario.

Answer 3

Utiliza <div class="row"> cada vez que comienzas una sección de cols para un ejemplo, digamos que tengo 3 secciones. La primera fila requiero 12 columnas. Envuelvo esas doce columnas en una fila. A continuación, enumero un ejemplo, contando hasta 12. El segundo que necesito 3 columnas, en esas columnas, digamos, necesito un menú de navegación, algo de contenido de texto y una imagen. Las columnas en una fila. Igual que en las dos primeras, en la tercera columna, solo necesito una imagen y algo de contenido. Sigo las mismas reglas.

<div class="row">
  <div class="col-md-1">one</div>
  <div class="col-md-1">two</div>
  <div class="col-md-1">three</div>
  <div class="col-md-1">four</div>
  <div class="col-md-1">five</div>
  <div class="col-md-1">six</div>
  <div class="col-md-1">seven</div>
  <div class="col-md-1">eight</div>
  <div class="col-md-1">nine</div>
  <div class="col-md-1">ten</div>
  <div class="col-md-1">eleven</div>
  <div class="col-md-1">twelve</div>
</div>

<div class="row">
  <div class="col-md-4">nav-menu</div>
  <div class="col-md-4">content</div>
  <div class="col-md-4">image</div>
</div>

<div class="row">
  <div class="col-md-6">image</div>
  <div class="col-md-6">content</div>
</div>