Bulma不一致输入宽度
提问于 2017-07-26 14:24:32
我有一个简单的表单，就是使用Bulma框架。我得到了不一致的输入宽度，无法找到补救办法。https://jsfiddle.net/onzpum90/似乎是在标签长的时候发生的。如果我留着短标签，问题就解决了。为什么标签会影响输入宽度？可能是我不熟悉的柔性箱问题。有人知道解决办法吗？
<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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-26 14:36:28
表单元素(.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来解决问题。
删除应用于flex-grow和flex-shrink的.field规则，并使用以下方法：
flex: 1 1 0这与以下相同：
flex: 1有关flex-basis: auto与flex-basis: 0之间区别的完整解释，请参阅下面的文章：https://stackoverflow.com/q/43520932/3597276
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45338426
复制相关文章
![[认证授权] 1.OAuth2授权](https://ask.qcloudimg.com/http-save/yehe-1133882/1u5qtt4s9z.jpeg)
![[腾讯社区开放平台]介绍开放授权协议-OAuth](https://ask.qcloudimg.com/http-save/yehe-410847/8gz3grtfx2.png)
腾讯云开发者
