我有一个使用 Bulma 框架的简单表单。我的输入宽度不一致并且找不到补救措施。 https://jsfiddle.net/onzpum90/当标签很长时似乎会发生这种情况。如果我保留短标签,问题就消失了。为什么标签会影响输入宽度?可能是我不熟悉的flexbox问题。有人知道解决办法吗?
<form action="">
<div class="field">
<div class="field-body">
<div class="field">
<p class="control is-expanded">
<label class="label">A very long label for a form</label>
<input type="text" name="" value="" class="input ">
</p>
</div>
<div class="field is-grouped">
<p class="control is-expanded">
<label class="label">Email</label>
<input type="email" name="email" value="" class="input ">
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<p class="control is-expanded">
<label class="label">Short Label</label>
<input type="text" name="" value="" class="input ">
</p>
</div>
<div class="field is-grouped">
<p class="control is-expanded">
<label class="label">Email</label>
<input type="email" name="email" value="" class="input ">
</p>
</div>
</div>
</div>
</form>
最佳答案
表单元素 (.field
) 的 div 容器是尺寸为 flex-grow: 1
的 flex 元素。
@media screen and (min-width: 769px), print
.field-body > .field:not(.is-narrow) {
-webkit-box-flex: 1;
flex-grow: 1;
}
虽然您已经定义了 flex-grow
,但尚未定义 flex-basis
。因此,flex-basis
保持其默认设置:auto
。
使用 flex-basis: auto
时,容器空间会根据元素内容的长度按比例分配。
因此,标签较长的元素的长度也会较长。
只需将 flex-basis
设置为 0
即可解决该问题。
删除应用于 .field
的 flex-grow
和 flex-shrink
规则并使用此规则:
flex: 1 1 0
这与:
相同flex: 1
有关 flex-basis: auto
与 flex-basis: 0
之间差异的完整说明,请参阅这篇文章: Make flex-grow expand items based on their original size
关于html - Bulma 输入宽度不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45338426/