Question

我无法用我的田地制作全长的布尔玛：

＆＃13;

is-fullwidth

＆＃13;

我做错了什么？ is-expanded和Jquery没有任何影响。

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>

如何在表单中创建全宽字段？

2 个答案: