html - Bulma Q：input.is-expanded 在导航或关卡中不起作用

Question

诚然，我在 flexbox 方面没有丰富的经验。我的理解是'is-expanded'会让输入填充任何空白空间。但是在导航/级别内部它似乎不起作用。

这是一个工作示例： 在此处输入链接描述

Answer 1

有几件事在起作用。

1. is-expanded 基本应用样式flex: 1 0 auto；这告诉当前项目，当包含在 display:flex 中时，它会增长而不是收缩。
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 时，它将突出显示页面上相应的显示元素。