8

この問題を解決するのに苦労しています。ドキュメントには、スパンを親スパンと等しく設定する必要があると書かれていますが、それを行うと、井戸コンテナのすぐ外側まで拡張されます。モバイルで表示すると問題なく表示されます (適切な量を右側に拡張してウェルを埋めます) が、デスクトップではうまく再生されません (フィールドをウェル内に拡張する必要があります)。

<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 -->
4

2 に答える 2

30

ドキュメントは実際に言っています：

グリッド列の同じサイズに一致する入力に使用.span1します。.span12

でも全角<input>にしたいでしょ？

<input>幅いっぱいにする

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

からも削除.pull-leftし<form>ます。この fiddleでどのように動作するかを確認してください。

編集

Bootstrap 2.2.0 以降、バンドルされinput-block-levelたクラスを使用してこの効果を達成します。

于 2012-09-07T16:33:41.343 に答える
0

最近、フォームとパネル本体でこの問題に遭遇しました。調べてみると、問題は入力ではなく、フォーム自体がパネルを超えて拡張されていることに気付きました。入力の代わりにフォームに max-width: 100% を配置して修正しました。

于 2015-03-02T15:37:29.763 に答える