1

ブートストラップとタグを使用してフォームを作成しているだけで、次.form-horizontalのように4列が並んでいます

<form class="form-horizontal">
    <div class="row span12">
      <div class="control-group span3">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
          <input type="text" id="inputEmail" placeholder="Email">
        </div>
      </div>
      <div class="control-group span3">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
          <input type="text" id="inputEmail" placeholder="Email">
        </div>
      </div>
      <div class="control-group span3">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
          <input type="text" id="inputEmail" placeholder="Email">
        </div>
      </div>                    
      <div class="control-group span3">
        <label class="control-label" for="inputPassword">Password</label>
        <div class="controls">
          <input type="password" id="inputPassword" placeholder="Password">
        </div>
      </div>
    </div>
</form>

しかし、サイズを変更すると、このスクリーンショットに示すように、実際にはレイアウトが悪くなります。

ここに画像の説明を入力

http://jsfiddle.net/juuristr/XXXqN/ (効果を確認するには、HTML ウィンドウのサイズを変更してみてください)

私が間違っていることについてのヒントはありますか?? Bootstrap は、収まりきらない項目を自動的にラップダウンして、1 行あたり 2 列にすることができませんか??

4

1 に答える 1

0

独自の余白があるため、フォームに合わせてフォームコントロールを使用できるかどうかはわかりません。これが機能することを確認してください

<div class="row-fluid">    
    <form class="form-horizontal">
        <div class="span3">
            <label>Email</label>
            <input type="text" class="span12" placeholder="Email" />
        </div>
        <div class="span3">
            <label>Email</label>
            <input type="text" class="span12" placeholder="Email" />
        </div>
        <div class="span3">
            <label>Email</label>
            <input type="text" class="span12" placeholder="Email" />
        </div>
        <div class="span3">
            <label>Password</label>
            <input type="password" class="span12" placeholder="Password"  />
        </div>
    </form>
</div>

フィドル

于 2013-01-29T15:06:46.967 に答える