布爾瑪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時，它會突出顯示頁面上相應的顯示元素。