布尔玛Q：input.is-expanded在导航或级别内不起作用

Question

无可否认，我对Flexbox没有太多的经验。我的理解是'扩展'会让输入填充任何空白空间。然而，在nav/level里面它似乎不起作用。

这里有一个工作示例： enter link description here

Answer 1

有在玩的几件事情。

1. is-expanded基本适用风格flex: 1 0 auto;这告诉当前项目，当它包含在显示器中时：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时，它会突出显示页面上相应的显示元素。