1

我想把 2 个表格放在一个井里，一个挨着一个。我使用 twitter-boostrap。

这是我的代码

      <div class="well">
          <h3>
            Title
          </h3>
          <form  method="post" class="form-horizontal">
              <div class="control-group">
              <label class="control-label" for="select01">Label1: </label> 
              <select class="input-mini" id="select01">
                      (my options)
              </select>
            </div>
              <div class="control-group">
              <label class="control-label" for="input01">Label2: </label> 
                <input class="input-mini" id="input01">
            </div>
            <div class="control-group">
              <label class="control-label" for="select02">Label3: </label> 
              <select class="input-mini" id="select02">
                (myoptions)
              </select>
            </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
          </form>
          <form  method="post" class="form-horizontal">
              <div class="control-group">
              <label class="control-label" for="input02">Label3: </label> 
                  <input class="input-mini" id="input02">
              </div>
              <div class="control-group">
              <label class="control-label" for="input03">Label4: </label> 
                  <input class="input-mini" id="input03">
              </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>

          </form>
</div>

如果我在 div 中包含表单并添加一个带有 float:left 的样式，那么我会很好地刹车并将我的表单排除在外。我在表单中尝试了跨度、div、表单，但我找不到一种方法可以将一个表单放在另一个表单旁边而不破坏井。

4

1 回答 1

7

尝试将您的表单包装在一个 div 中以将该内容与井隔离：

http://jsfiddle.net/SAdM8/6

<div class="well">
    <div style="overflow: hidden;">
    ... forms ...
    </div>
</div>

就像比利护城河所说，您可以简单地将溢出属性添加到井中。我更喜欢将 Bootstrap 元素保持在其自然状态以避免意外损坏。要么工作。

于 2013-03-21T12:48:11.923 回答