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 上是如何工作的。

---

编辑

由于 Bootstrap 2.2.0 使用捆绑的input-block-level 类来实现这个效果。

Answer 2

我最近在表单和面板正文中遇到了这个问题。经过检查，我注意到问题不在于输入，而在于表单本身超出了面板。我通过在表单而不是输入上放置 max-width: 100% 来修复它。