如何在表单中制作全宽字段？

Question

我无法用 bulma 使我的字段全宽：

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<nav id="login" class="panel">
    <p class="panel-heading">Login</p>
    <div class="panel-block">
        <form name="LoginForm" action="/login/" method="post">
            <div class="field is-fullwidth">
                <div class="control is-expanded has-icons-left has-icons-right">
                    <input class="input is-fullwidth" type="email" placeholder="Email">
                    <span class="icon is-small is-left">
                        <i class="fas fa-envelope"></i>
                    </span>
                    <span class="icon is-small is-right">
                        <i class="fas fa-check"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <div class="control has-icons-left">
                    <input class="input" type="password" placeholder="Password">
                    <span class="icon is-small is-left">
                        <i class="fas fa-lock"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <label class="checkbox">
                        <input type="checkbox">Remember me</a>
                    </label>
                </div>
            </div>
            <div class="field is-grouped is-grouped-right">
                <p class="control">
                    <button class="button is-success">Login</button>
                </p>
            </div>
            <div class="field">
                <div class="control">
                    <a href="/register/">I haven't account yet</a>
                </div>
            </div>
             <div class="field">
                <div class="control">
                    <a href="/reset-password/">I forgot password</a>
                </div>
            </div>
        </form>
    </div>
</nav>

我做错了什么？ is-fullwidth 和 is-expanded 没有任何效果。

Answer 1

问题是表格不是全角。您可以将自定义 css 添加到 form

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<style>
  form {
    width: 100%;
    float: left;
  }
</style>
<nav id="login" class="panel">
    <p class="panel-heading">Login</p>
    <div class="panel-block">
        <form name="LoginForm" action="/login/" method="post">
            <div class="field is-fullwidth">
                <div class="control is-expanded has-icons-left has-icons-right">
                    <input class="input is-fullwidth" type="email" placeholder="Email">
                    <span class="icon is-small is-left">
                        <i class="fas fa-envelope"></i>
                    </span>
                    <span class="icon is-small is-right">
                        <i class="fas fa-check"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <div class="control has-icons-left">
                    <input class="input" type="password" placeholder="Password">
                    <span class="icon is-small is-left">
                        <i class="fas fa-lock"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <label class="checkbox">
                        <input type="checkbox">Remember me</a>
                    </label>
                </div>
            </div>
            <div class="field is-grouped is-grouped-right">
                <p class="control">
                    <button class="button is-success">Login</button>
                </p>
            </div>
            <div class="field">
                <div class="control">
                    <a href="/register/">I haven't account yet</a>
                </div>
            </div>
             <div class="field">
                <div class="control">
                    <a href="/reset-password/">I forgot password</a>
                </div>
            </div>
        </form>
    </div>
</nav>

Answer 2

直接将 class="control" 添加到 panel-block 中的元素。

示例：

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<nav id="login" class="panel">
    <p class="panel-heading">Login</p>
    <div class="panel-block">
        <form class="control" name="LoginForm" action="/login/" method="post">
            <div class="field is-fullwidth">
                <div class="control is-expanded has-icons-left has-icons-right">
                    <input class="input is-fullwidth" type="email" placeholder="Email">
                    <span class="icon is-small is-left">
                        <i class="fas fa-envelope"></i>
                    </span>
                    <span class="icon is-small is-right">
                        <i class="fas fa-check"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <div class="control has-icons-left">
                    <input class="input" type="password" placeholder="Password">
                    <span class="icon is-small is-left">
                        <i class="fas fa-lock"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <label class="checkbox">
                        <input type="checkbox">Remember me</a>
                    </label>
                </div>
            </div>
            <div class="field is-grouped is-grouped-right">
                <p class="control">
                    <button class="button is-success">Login</button>
                </p>
            </div>
            <div class="field">
                <div class="control">
                    <a href="/register/">I haven't account yet</a>
                </div>
            </div>
             <div class="field">
                <div class="control">
                    <a href="/reset-password/">I forgot password</a>
                </div>
            </div>
        </form>
    </div>
</nav>

如何在表单中制作全宽字段？

How to make full width fields in the form?

html

css

bulma