html - フォーム タグでラップされている場合、ブルマ フォーム コントロールの幅が禁止される

Question

Bulma のドキュメントに従う場合、 を でラップしinput.inputてp.controlスタイルを設定し、コンテナーの幅を広げることができます。ただし、コンテナーがフォームの場合 (そうである可能性が高い)、コントロールは既定のサイズに縮小されます。私は何を間違っていますか？

以下のコードサンプル:

<div class="panel">
    <div class="panel-heading">
        Login
    </div>
    <div class="panel-block">
        <form>
            <p class="control has-icon">
                <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
                <span class="icon is-small">
                    <i class="fa fa-envelope"></i>
                </span>
            </p>
            <p class="control has-icon">
                <input class="input is-expanded" type="password" placeholder="Password" name="password">
                <span class="icon is-small">
                    <i class="fa fa-lock"></i>
                </span>
            </p>
            <p class="control">
                <button class="button is-success" type="submit">
                    Login
                </button>
            </p>
        </form>
    </div>
</div>

Answer 1

私は答えを見つけて、うっとうしく顔を見つめていました: のクラスを に設定する必要がありformますcontrol。

<div class="panel">
    <div class="panel-heading">
        Login
    </div>
    <div class="panel-block">
        <form class="control">
            <p class="control has-icon">
                <input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
                <span class="icon is-small">
                    <i class="fa fa-envelope"></i>
                </span>
            </p>
            <p class="control has-icon">
                <input class="input is-expanded" type="password" placeholder="Password" name="password">
                <span class="icon is-small">
                    <i class="fa fa-lock"></i>
                </span>
            </p>
            <p class="control">
                <button class="button is-success" type="submit">
                    Login
                </button>
            </p>
        </form>
    </div>
</div>