布尔玛输入宽度不一致

Question

我有一个使用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>

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，容器空间根据内容的长度在项目中按比例分配

。

因此，标签较长的商品的长度会更长。

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

删除适用于flex-grow的{​​{1}}和flex-shrink规则并改为使用此规则：

.field

与：

相同

flex: 1 1 0

revised demo

有关flex: 1 与flex-basis: auto之间差异的完整说明，请参阅此帖： Make flex-grow expand items based on their original size