CSS 引导行?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19138430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:34:58  来源:igfitidea点击:

Bootstrap Rows?

csstwitter-bootstraptwitter-bootstrap-3

提问by panthro

I have a form and im getting confused with rows.

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

Where should I put in rows? Do I need them? Do I need one for a modal? One for the entire form or each form input?

我应该把行放在哪里?我需要他们吗?我需要一个模态吗?一个用于整个表单还是每个表单输入?

Here's what I have:

这是我所拥有的:

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

回答by SethCodes

You use <div class="row">whenever you start a section of colsfor an example, lets say I have have 3 sections. The first row I require 12 columns. I wrap those twelve columns in a row I listed below an example counting to 12. The second I need 3 columns, In those columns lets say for an example I need a nav-menu, some text-content and an image, I will wrap the columns in a row. Same like the first two, the third column I need only a image and some content. I follow the same rules.

例如,<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>

回答by rogermushroom

You do need the rows because if you don't follow the structure defined in the documentation-

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

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

-the grid won't behave as expected. There are a couple ways of working around this, neither of them ideal.

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

  1. You can wrap the form around the container and then create the whole grid structure inside that container putting your form groups inside the columns. You might have to set the form width to 100%. Another limitation is that your form groups need to be inside columns and can't wrap them. Therefore if you really need to control widths inside form groups then you need to create a new container inside the group. This is fairly easily managed if you wrap containers in columns with factors of 2, 4 or 6 then in is clear where the columns in your new container will align with the columns in the outer container.
  2. Send your inputs using javascript. Then you don't need a form.
  1. 您可以将表单包裹在容器周围,然后在该容器内创建整个网格结构,将表单组放在列中。您可能必须将表单宽度设置为 100%。另一个限制是您的表单组需要在列内并且不能包装它们。因此,如果您真的需要控制表单组内的宽度,那么您需要在组内创建一个新容器。如果您将容器包装在因子为 2、4 或 6 的列中,那么这很容易管理,然后在新容器中的列将与外部容器中的列对齐的位置很清楚。
  2. 使用 javascript 发送您的输入。那你就不需要表格了。

回答by VictorySaber

I think I can see the confusion. A form has many fields, on different rows, but you wouldn't necessarily use a Bootstrap "row" for each.

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

What we can do is use just one Bootstrap "row", and then put each label/field pair in its own div. Within that div the label and the field have their own divs, with Boostrap col- information. This will give us a form with many rows, and will give the desired wrapping effect you are expecting with Bootstrap.

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

The example below is an MVC form. Don't let the MVC syntax confuse you - you can replace the @Html.Label & Editor with HTML labels & input fields.

下面的示例是一个 MVC 表单。不要让 MVC 语法迷惑您 - 您可以用 HTML 标签和输入字段替换 @Html.Label & Editor。

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