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将页面缩小到窗口，您可能需要调整窗口大小以查看网格布局。

我希望有所帮助！干杯！

Answer 2

你会破坏Bootstrap很多，但如果你能给容器一个id并按照这种方式设置样式：

#form-container {
    width: 700px;
}

#form-container .row-fluid .span1 {
    float: left;
    margin-right: 10px;
}

要获得此结果：http://fiddle.jshell.net/52VtD/448/

Bootstrap - 表单元素自动布局

2 个答案: