Question

我想将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的样式，那么我的制动器就会把我的表单从它中取出来。我在一个表单中尝试了span，div，form，但是我找不到一种方法将一个表单放在另一个表单旁边而不会破坏井。

Answer 1

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

http://jsfiddle.net/SAdM8/6

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

就像Billy Moat所说，你可以简单地将溢出属性添加到井中。我更喜欢将Bootstrap元素保持在自然状态，以避免意外破损。要么有效。

漂浮在井内形成

1 个答案: