Строки Bootstrap?

У меня есть форма, и я запутался со строками.

Где мне помещать строки? Нужны ли они мне? Нужен ли мне для модального? Один для всей формы или ввода каждой формы?

Вот что у меня есть:

<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>

Ответы

Ответ 1

Вы используете <div class="row">, когда вы начинаете раздел cols для примера, скажем, у меня есть 3 раздела. В первой строке мне нужно 12 столбцов. Я обертываю эти двенадцать столбцов в строке, которую я перечислял ниже, пример, равный 12. Второе мне нужно 3 столбца. В этих столбцах можно сказать, что для примера мне нужно навигационное меню, некоторое текстовое содержимое и изображение, я оберну столбцы в строке. То же, что и первые два, третий столбец мне нужен только образ и некоторый контент. Я придерживаюсь тех же правил.

<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>

Ответ 2

Вам нужны строки, потому что если вы не следуете структуре, определенной в документации -

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

- сетка не будет вести себя так, как ожидалось. Есть несколько способов обойти это, ни один из них не идеален.

  • Вы можете обернуть форму вокруг контейнера, а затем создать всю структуру сетки внутри этого контейнера, помещая ваши группы форм внутри столбцов. Вам может потребоваться установить ширину формы до 100%. Другое ограничение заключается в том, что ваши группы форм должны быть внутри столбцов и не могут их обернуть. Поэтому, если вам действительно нужно контролировать ширину внутри групп форм, вам нужно создать новый контейнер внутри группы. Это довольно легко управлять, если вы переносите контейнеры в столбцы с коэффициентами 2, 4 или 6, тогда ясно, где столбцы в новом контейнере будут выравниваться с столбцами во внешнем контейнере.
  • Отправьте свои входы с помощью javascript. Тогда вам не нужна форма.

Ответ 3

Думаю, я вижу замешательство. Форма имеет много полей в разных строках, но вы не обязательно будете использовать строку "Bootstrap" для каждого.

Что мы можем сделать, это использовать только одну строку "Bootstrap", а затем поместить каждую пару ярлыков/полей в свой собственный div. Внутри этого div метка и поле имеют свои собственные div, с Boostrap col-information. Это даст нам форму со многими строками и даст желаемый эффект обертывания, который вы ожидаете с помощью Bootstrap.

Ниже приведен пример формы MVC. Не позволяйте синтаксису MVC запутать вас - вы можете заменить @Html.Label и Editor на HTML-метки и поля ввода.

<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>