Twitter Bootstrap：井戸を超えて入力フィールドを停止する

Question

この問題の解決には問題があります。ドキュメントでは、スパンを親スパンと同じに設定する必要があると言われていますが、それを行う際にはウェルの外側にも広がっています。モバイルで見たときはうまく見えます（適切な量を右に広げて、ウェルを埋める）が、デスクトップ上ではうまくいきません（フィールドがウェルの内側に広がるようにしたい）。

<div class="container"> 
    <div class="row"> 
     <div class="span4 offset4"> 
      <div id="login-panel"> 
       <div class="well bordered clearfix"> 
        <div class="text-center"> 
         <div class="page-header" style="border-bottom: none; margin: 0;"> 
          <img src="library/img/logo-01.png"/> 
         </div> 
        </div> 
        <form method="POST" action="#" accept-charset="UTF-8" class="pull-left"> 
         <legend>App name</legend> 
         <div class="control-group "> 
          <!-- username field --> 
          <div class="controls"> 
           <label>Email</label> 
           <input class="span4" type="text" name="email" value="" id="email" placeholder="Your email address"> 
          </div> 
         </div> 

         <div class="control-group"> 
          <label>Password</label> 
          <!-- password field --> 
          <input type="password" name="password" id="password" placeholder="Password"> 
         </div> 
         <div class="control-group "> 
          <p> 
           <input class="btn btn-default pull-left" type="submit" value="Sign-up"> 
           <input class="btn btn-primary pull-right" type="submit" value="Login"> 
          </p> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> <!-- end row --> 
</div> <!-- end container --> 

Answer 1

ドキュメントが実際に言っている：

使用.span1グリッド 列の同じ大きさに一致する入力の.span12に。

しかし、全幅<input>にしたいですか？

<input>が

input.full-width { 
    box-sizing: border-box; 
    width: 100%; 
    height: 30px; 
} 

また<form>から.pull-leftを削除全幅を取るようにしてください。それがどのように起きているかをthis fiddleで確認してください。

---

編集

ブートストラップ2.2.0使用は、この効果を達成するためにinput-block-levelクラスをバンドルしているため。

Answer 2

最近、フォームとパネル本体でこの問題が発生しました。検査の結果、問題は入力ではなく、フォーム自体がパネルを超えて拡大していることに気付きました。私は入力の代わりにフォームにmax-width：100％を入力して修正しました。