诚然,我在 flexbox 方面没有丰富的经验。我的理解是'is-expanded'会让输入填充任何空白空间。但是在导航/级别内部它似乎不起作用。
这是一个工作示例: 在此处输入链接描述
有几件事在起作用。
flex: 1 0 auto
;这告诉当前项目,当包含在 display:flex 中时,它会增长而不是收缩。因此,解决方法如下应用样式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 时,它将突出显示页面上相应的显示元素。