【问题标题】：Twitter Bootstrap 3 Inline Form with labels带有标签的 Twitter Bootstrap 3 内联表单
【发布时间】：2014-03-23 01:21:06
【问题描述】：

在到处搜索之后，我无法确切了解如何设计具有以下设计的内联表单：（尽可能使用 bootstrap 3 类而不是 css 自定义）

当用户有宽屏时：

 Form-Legend

     LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   LabelFieldC: InputFieldC   <Submit Button>

当用户的屏幕较小时：

Form-Legend

    LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   

    LabelFieldC: InputFieldC   <Submit Button>

这个想法是设计最初将所有字段放在一行中，如果不适合控件将跳转到下一行，但将标签+字段保持在一起。

如果有办法让每个 Label + Input 之间的间距大于 Label 与其 Field 之间的间距。

最后，如果有一种方法可以让 Label + Field 在跳转到下一行时有更多的垂直边距。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

选项 #1：固定列

您可以使用混合col-xs-12、col-sm-6 和col-lg-3 的结构来获得1、2 或4 列。在您的form-group 中，请记住使用col-xs-4 和col-xs-8 修复标签/输入大小：

<div class="container">
  <form class="form form-inline" role="form">

    <legend>Form legend</legend>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldA" class="col-xs-4">Field A</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldB" class="col-xs-4">Field B</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
      <label for="InputFieldC" class="col-xs-4">Field C</label>
      <div class="col-xs-8">
        <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
      </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6 col-lg-3">
    <button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
    </div>

  </form>
</div>

你还需要一些 CSS：

// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
    padding-left: 0;
    padding-right: 0;
}
// vertical align label
.form-inline label {
    line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
    width: 100%;
}
// Reset margin-bottom for our multiline form
@media (min-width: 768px) {
  .form-inline .form-group {
    margin-bottom: 15px;
  }
}

您可以添加任意数量的输入。

Bootply

选项 #2：流体柱

为了能够不关心每行的字段数，你可以使用这个结构：

<div class="container">
  <form class="form form-inline form-multiline" role="form">

    <legend>Form legend</legend>

    <div class="form-group">
      <label for="InputFieldA">Field A</label>
      <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
    </div>

    <div class="form-group">
      <label for="InputFieldB">Very Long Label For Field B</label>
      <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
    </div>

    <div class="form-group">
      <label for="InputFieldC">F. C</label>
      <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
    </div>

    <div class="form-group">
      <label for="InputFieldD">Very Long Label For Field D</label>
      <input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
    </div>

    <div class="form-group">
      <label for="InputFieldE">Very Long Label For Field E</label>
      <input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
    </div>

    <div class="form-group">
      <label for="InputFieldF">Field F</label>
      <input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
    </div>

    <div class="form-group">
      <button type="submit" class="btn btn-default">Submit Button</button>
    </div>

  </form>
</div>

还有一些 CSS 行来修复边距：

.form-multiline .form-group {
    margin-bottom: 15px;
    margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
    margin-right: 15px;
}

Bootply

【讨论】：

有没有办法让我不必预见每行可以容纳的项目数量？此外，如果我尝试使提交按钮更小，它会与其他字段不对齐
对于提交按钮：使 col + offset + push 等于 12：col-xs-8 col-xs-offset-4 或 col-xs-4 col-xs-offset-8 等...要获得自动网格，请参阅我的编辑。
您先生，是个巫师 :)。第二个选项正是我想要的。作为说明，我看到引导程序 3 中不存在“表单”类。此外，现在我必须为控件设置自定义 css 宽度，因为 col-xs 类使用的 % 宽度在您的 2º bootply 中不起作用。我将使用第二个示例并进行一些更改：bootply.com/117291suggests?
关于 ? 的建议您似乎遵循正确的 ptah ！我会避免使用双重col-xs-offset-1（实际上，我会使用col-sm-offset-1，以便在移动设备上获得更多空间）。如果您希望标签浮动在输入附近，则不应使用 control-label。
谢谢，当与我们网络的其他部分结合使用时，偏移量是有意义的。我使用了控制标签，所以我可以专门设置它们的样式，以防我们在输入旁边有一些额外的标签或替换一个（对于只读信息字段）

【解决方案2】：

与@zessx 中的选项#1 相同，但不覆盖CSS。这也将标签向右对齐以增加标签-控制对之间的空间。 “媒体”类可以在不创建自定义类的情况下添加上边距，但在一般情况下，最好有一个自定义类。

<div class="form-horizontal">
    <legend>Form legend</legend>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
        <div class="input-group col-xs-8">
            <input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
        </div>
    </div>
    <div class="media col-xs-12 col-sm-6 col-lg-3">
        <button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
    </div>
</div>

Bootply

【讨论】：

【解决方案3】：

我会提出一些完全不同的建议，将标签和字段包含在内联 div 中：

<div style="display:inline-block"> 
  Label:input
</div>

这样，当它们即将中断时，它们会成对中断，标签+输入。

【讨论】：

【解决方案4】：

好的，我使用了网格系统，这与您的设置非常接近。

<div class="container">
    <form role="form" class="form-horizontal">
        <div class="form-group col-sm-5">
            <label for="inputPassword" class="col-xs-4 control-label">Email</label>
            <div class="col-xs-8">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" />
            </div>
        </div>
        <div class="form-group col-sm-5">
            <label for="inputPassword" class="col-xs-4 control-label">Password</label>
            <div class="col-xs-8">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" />
            </div>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

这只有两个字段。您可能想要更改 col 类以适合您的布局。

jsFiddle

【讨论】：

但在您的示例中，如果我调整窗口的宽度，则 2º 标签 + 输入不会跳转到下面的行。考虑到它可能有 3、4 甚至更多对标签 + 输入，它们必须根据可用宽度调整为一行或多行。
正如我所说，您必须调整 col 类以适应元素的数量。您将无法仅使用引导程序创建如此动态的东西。您将不得不求助于一些 JavaScript 或自定义 CSS 来实现这一点。
我最接近的尝试是使用getbootstrap.com/css/#forms-inline 而不是 col 类，因为您不必定义每行中的元素数量...问题是在跳转后将标签 + 输入放在一起到下一行并将它们正确对齐到后续行中

【解决方案5】：

你可以试试下面

在这里工作-http://www.bootply.com/117807

<div class="container">
<div class="row">
  <div class="col-md-4">
  <div class="row">
    <div class="col-md-4 col-xs-3 col-sm-4"><label>First Name</label></div>
    <div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
  </div>
  </div>
  <div class="col-md-4">
  <div class="row">
    <div class="col-md-4 col-xs-3 col-sm-4"><label>Last Name</label></div>
    <div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
    </div>
  </div>
  <div class="col-md-4">
  <div class="row">
    <div class="col-md-4 col-xs-3 col-sm-4"><label>Contact</label></div>
    <div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
    </div>
  </div>

  </div>
</div>

【讨论】：

【解决方案6】：

最简单的方法是将标签和文本输入都放在 cols div 中。希望这将为所有其他人节省时间:)

<div class="col-md-3 text-right">
   <label>City</label>
</div>
<div class="col-md-3 text-right">
     <asp:TextBox data-toggle="tooltip" pbpo-validation-type="required" title="City" runat="server" ID="textbox_city" CssClass="form-control input-sm" ClientIDMode="Static" placeholder=""></asp:TextBox>
</div>

【讨论】：