css - Bootstrap - 表单元素自动布局

Question

我有以下表格，我想连续有 3 个元素。
因为它是自动生成的，所以我真的不能对 html 进行太多更改。
我无法为每一列设置动态跨度。
由于我这里的限制，是否可以破坏下面的代码以便我连续有 3 个字段？

http://fiddle.jshell.net/52VtD/446/

<div class="row-fluid">
  <input id="Id" name="Id" type="hidden">
  <div class="span1">
    <label>
      Email Address
    </label>
    <input class="form-control" id="Email" name="Email" type="text">
  </div>
  <div class="span1">
    <label>
      Full Name
    </label>
    <input class="form-control" id="FullName" name="FullName" type="text">
  </div>
  <div class="span1">
    <label>
      Active?
    </label>
    <input class="form-control" id="IsActive" name="IsActive" type="text">
  </div>
  <div class="span1">
    <label>
      Password
    </label>
    <input class="form-control" id="Password" name="Password" type="password">
  </div>
  <input name="Avatar.Id" type="hidden">
  <div class="span1">
    <label>
      Upload image
    </label>
    <input class="form-control" id="Avatar.FileContent" name="Avatar.FileContent" placeholder="Select an image" type="file">
  </div>
</div>

Answer 1

有时，不要过多考虑 Bootstrap 会有所帮助。另请注意，这是我正在使用的 Bootstrap 3。

如果您希望在一行中包含“三个元素”(包括标签)，可以使用 6 列来创建。每个标签 3 个，每个输入 3 个。

http://fiddle.jshell.net/pLSD9/1/

在这种情况下，您不使用任何内置表单布局，如 .form-inline。您使用 Bootstrap 网格并将您的元素相应地放置在其中。由于 Bootstrap 为其表单输入元素提供 100% 的宽度，因此它们将填充网格空间。

我使用了“sm”大小的网格，因此当表单达到 Bootstrap 认为的“小”大小时，它将堆叠元素。由于 JSFiddle 将页面向下放到窗口中，您可能必须调整窗口大小才能看到网格布局。

希望对您有所帮助! 干杯!