当遵循 Bulma 文档时,您可以用 p.control
包装 input.input
以便对其进行样式设置并使其扩展到容器的宽度。但是,当容器是一个表单(很可能是)时,控件会缩小到它们的默认大小。我做错了什么?
下面的代码示例:
<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>
最佳答案
我找到了答案,烦人地盯着我的脸:你需要将 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>
关于html - Bulma 表单控件宽度在包裹在表单标签中时被抑制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42232358/