Bulma Q：input.is-expanded在nav或level中不起作用

Question

不可否认，我对flexbox没有太多经验。我的理解是'is-expanded'会让输入填充任何空白空间。但是在nav / level中它似乎不起作用。

这是一个有效的例子： enter link description here

Answer 1

有一些事情在起作用。

1. is-expanded基本上应用了样式flex: 1 0 auto;这告诉当前项目，当包含在显示中时：flex to grow而不是收缩。
2. 包含输入的html元素正在设置宽度限制。即使它说它想要成长，它也只能增长到其父容器的大小。你的父母之一正在限制这一点。

因此，变通方法应用样式flex:1 0 auto，如下所示：

<div style="flex: 1 0 auto;" class="nav-left">
  <a class="nav-item">Logo</a>
  <div style="flex: 1 0 auto;" class="nav-item">
    <form style="flex: 1 0 auto;" class="control has-addons"> 
      <input class="input is-expanded" type="text">   ....

使用Chrome调试器可以帮助您查看导致宽度限制的最顶级父级。突出显示HTML时，它将突出显示页面上相应的显示元素。