Twitter Bootstrap: Stop input field extending beyond well

Question

I'm having trouble trying to resolve this issue. The docs say that I should set the span equal to the parent span, however, it extends to the right outside of the well container when I do that. It looks fine when viewed on mobile (extends the appropriate amount to the right, filling the well), however, it doesn't play well on desktop (I want the fields to extend inside the well).

<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

Docs are actually saying:

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

But you want to make a full-width <input>, right?

Make an <input> to take full width

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

Also remove .pull-left from the <form>. See how it woks on this fiddle.

---

Edit

Since Bootstrap 2.2.0 use bundled input-block-level class to achieve this effect.