17

我有一个表格，我对行感到困惑。

我应该把行放在哪里？我需要它们吗？我需要一个模态吗？一个用于整个表单或每个表单输入？

这是我所拥有的：

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

4

3 回答 3

15

<div class="row">例如，每当您开始一个部分时，您都会使用cols，假设我有 3 个部分。第一行我需要 12 列。我将这 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>
于 2013-10-02T14:45:39.983 回答
3

您确实需要这些行，因为如果您不遵循文档中定义的结构-

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

- 网格不会按预期运行。有几种方法可以解决这个问题，但都不是理想的。

  1. 您可以将表单包裹在容器周围，然后在该容器内创建整个网格结构，将表单组放在列中。您可能必须将表单宽度设置为 100%。另一个限制是您的表单组需要在列内并且不能包装它们。因此，如果您确实需要控制表单组内的宽度，那么您需要在组内创建一个新容器。如果您将容器包装在因子为 2、4 或 6 的列中，那么这很容易管理，那么新容器中的列将与外部容器中的列对齐的位置很清楚。
  2. 使用 javascript 发送您的输入。那你就不需要表格了。
于 2014-04-03T00:32:40.550 回答
2

我想我可以看到混乱。一个表单有许多字段，在不同的行上，但您不一定要为每个字段使用引导程序“行”。

我们可以做的是只使用一个引导程序“行”，然后将每个标签/字段对放在自己的 div 中。在那个 div 中，标签和字段有自己的 div，带有 Boostrap col-信息。这将为我们提供一个包含许多行的表单，并将提供您期望的 Bootstrap 所需的包装效果。

下面的示例是一个 MVC 表单。不要让 MVC 语法让您感到困惑 - 您可以将 @Html.Label 和编辑器替换为 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>
于 2015-08-07T09:21:01.440 回答