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

最近我遇到了這個問題，形式和麪板體。經過檢查，我注意到問題不是投入，而是形式本身超出了面板。我通過在表單上放置最大寬度：100％而不是輸入來修復它。