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を使用してスタイルを追加すると、うまくブレーキをかけてフォームを削除します。フォーム内でspan、divs、formを試しましたが、うまく壊さずに1つのフォームを並べて配置する方法を見つけることができません。

4

1 に答える 1

7

フォームをdivでラップして、そのコンテンツをウェルから分離してみてください。

http://jsfiddle.net/SAdM8/6

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

Billy Moatが言ったように、オーバーフロープロパティをウェルに追加するだけで済みます。不注意による破損を避けるために、Bootstrap要素を自然な状態に保つことを好みます。どちらも機能します。

于 2013-03-21T12:48:11.923 に答える