5

これは、単純なフォームに使用しているコードです。Bootstrap の Web サイトの例からフォーム全体をほぼコピーし、テキスト入力と送信ボタン以外のすべてのコントロールを削除しました。

<form>
    <fieldset>
        <legend>About You</legend>
        <input class="input-medium" type="text" placeholder="First Name">
        <button type="submit" class="btn">Get Started</button>
    </fieldset>
</form>

何らかの理由で、送信ボタンが入力の直後に来ると、新しい行にドロップされません。

それが機能しないことのデモンストレーション。

例からラベル付きのチェックボックスを追加すると、送信ボタンが期待どおりに新しい行にドロップされます。

<form>
    <fieldset>
        <legend>About You</legend>
        <input class="input-medium" type="text" placeholder="First Name">
        <label class="checkbox">
            <input type="checkbox"> Check me out
        </label>
        <button type="submit" class="btn">Get Started</button>
    </fieldset>
</form>

テキスト入力後にボタンが来ない場合に機能します。

私は何を間違っていますか？BootstrapCDN.com からロードされた最新のブートストラップ CSS および JS (2.3.2) を使用しています。

4

1 に答える 1

9

との両方が<input>あり<button>ますdisplay: inline-block。
<label>ボタンをdisplay: block次の行にレンダリングするように強制します。

次の行にボタンを表示するための回避策は、単純に を含む要素display: block、つまり要素で囲むこと<div>です。
このFIDDLE DEMOを見てください

于 2013-06-23T06:37:30.620 に答える