0

我有以下表格，我想连续有 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>
4

2 回答 2

1

有时，它有助于不要过度思考 Bootstrap。另请注意，这是我正在使用的 Bootstrap 3。

如果您希望在一行中包含“三个项目”，包括标签，则可以创建 6 列。每个标签 3 个，每个输入 3 个。

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

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

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

我希望这会有所帮助！干杯!

于 2013-11-02T05:27:29.597 回答
0

你会破坏 Bootstrap 很多，但如果你可以给容器一个id并以这种方式设置它的样式：

#form-container {
    width: 700px;
}

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

要得到这个结果： http: //fiddle.jshell.net/52VtD/448/

于 2013-11-02T05:02:16.340 回答