2017-02-22 35 views
-1

По общему признанию, у меня нет большой опыт работы с flexbox. Мое понимание состоит в том, что «is-extended» позволит входному заполнению любого пустого пространства. Однако внутри nav/level он, похоже, не работает.Bulma Q: input.is-extended не работает внутри навигатора или уровня

Вот рабочий пример: enter link description here

ответ

1

Существует несколько вещей в игре.

  1. is-extended в основном применяет стиль 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, он выделит соответствующий отображаемый элемент на странице.

 Смежные вопросы

  • Нет связанных вопросов^_^