Bulma 不一致的输入宽度

Question

I have a simple form that is using the Bulma framework. I am getting inconsistent input widths and can't find a remedy. 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>

Answer 1

表单元素 (.field) 的 div 容器是弹性项目，大小为 flex-grow: 1。

@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，容器 space 根据内容的长度按比例 分布在项目中。

因此，标签较长的项目的长度会更长。

您只需将 flex-basis 设置为 0 即可解决问题。

删除应用于 .field 的 flex-grow 和 flex-shrink 规则并改用此规则：

flex: 1 1 0

等同于：

flex: 1

revised demo

有关 flex-basis: auto 与 flex-basis: 0 之间差异的完整解释，请参阅此 post：

Bulma 不一致的输入宽度

Bulma Inconsistent Input Width

html

css

flexbox

bulma