2

在此处输入图像描述我有一个使用 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>
4

1 回答 1

4

表单元素 () 的 div 容器.field是大小为 的弹性项目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-growandflex-shrink规则.field并改用它：

flex: 1 1 0

这与以下内容相同：

flex: 1

修改后的演示

flex-basis: auto有关vs之间区别的完整说明flex-basis: 0，请参阅这篇文章：Make flex-grow expand items based on their original size

于 2017-07-26T22:36:28.483 回答