Twitter Bootstrap 3 内联表单带标签

Question

Twitter Bootstrap 3 内联表单带标签

htmlcsstwitter-bootstraptwitter-bootstrap-3

33

在到处搜索后，我仍无法确定如何设计一个具有以下设计的内联表单：（尽可能使用Bootstrap 3类而不是自定义CSS）

当用户拥有宽屏幕时：

 Form-Legend

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

当用户使用较小的屏幕时：

Form-Legend

    LabelFieldA: InputFieldA   LabelFieldB: InputFieldB   

    LabelFieldC: InputFieldC   <Submit Button>

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

另外，如果有一种方法使每个标签+输入之间的间距大于标签和其字段之间的间距。

最后，如果有一种方法在跳到下一行时在标签和字段之间具有更多的垂直间距。

- VSP

6个回答

5

与@zessx的选项＃1相同，但不覆盖CSS。这个选项也将标签对齐到右侧，以增加标签-控件对之间的空间。类“media”用于添加顶部边距而不创建自定义类，但一般情况下最好有一个自定义类。

<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

- Mark Meyerovich

2

我建议采用完全不同的方式，将标签和字段包装在内联的div中：

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

这样，当它们即将损坏时，它们会成对地损坏，标签+输入框。

- scooterlord

1

最简单的方法是将标签和文本输入都放在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>

- Talha

1

您可以尝试以下：

在这里工作- 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>

- Abhineet

1

好的，我已经尝试使用网格系统，这是我能够接近您的设置的最佳方案。

<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（JSFiddle）

- bukka

但是在你的例子中，如果我调整窗口的宽度，第二个标签+输入框不会跳到下一行。请注意，可能有3、4甚至更多对标签+输入框需要根据可用宽度调整到一个或多个行。 - VSP

正如我所说，您将需要调整“col”类以适应元素数量。您无法仅使用Bootstrap创建如此动态的内容。您需要使用一些JavaScript或自定义CSS才能实现。 - bukka

我的最接近的尝试是使用http://getbootstrap.com/css/#forms-inline而不是col类，因为您不必定义每行中将有多少个元素...问题在于跳转到下一行后如何将标签+输入组合在一起并正确对齐以下行。 - VSP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zessx · Accepted Answer

选项＃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