如何在表单中制作全宽字段?
How to make full width fields in the form?
我无法用 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
没有任何效果。
问题是表格不是全角。您可以将自定义 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>
直接将 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>
我无法用 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
没有任何效果。
问题是表格不是全角。您可以将自定义 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>
直接将 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>