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％而不是输入来修复它。