Я изучаю Bootstrap и пытаюсь реализовать его в своих проектах Ruby on Rails.Я использую загрузчик navbar и пытаюсь интегрировать это с рельсами.У меня есть панель поиска, которую я пытаюсь сделать отзывчивой.Я хочу, чтобы ширина формы поиска заполняла доступное пространство и уменьшалась / увеличивалась при изменении размера экрана.К панели навигации в начальной загрузке уже применено множество стилей CSS, и я чувствую, что попытаться добавить такую функцию в существующую панель навигации сложно.
Вот код для моей формы ...
application.html.erb
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #228822;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- overriding to HTTP GET because turbolinks causes issues with pagination infinite scroll -->
<%=link_to "The Pragmatic Bookshelf", store_index_path, :class => "navbar-brand", method: :get, style: "color:#bbffbb" %>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><%= link_to t('.questions'), store_index_path, style: "color:#bbffbb" %></li>
<li><%= link_to t('.news'), store_index_path, style: "color:#bbffbb" %></li>
<li><%= link_to t('.contact'), store_index_path, style: "color:#bbffbb" %></li>
</ul>
<form class="navbar-form navbar-left">
<div id="search_bar" >
<%= form_tag(store_index_path, method: :get) do %>
<div class="search_bar_text">
<%= text_field_tag :search, '', id: 'search_bar_text' %>
</div>
<div class="search_bar_image">
<%= image_submit_tag 'search.png', id: 'search_bar_image'%>
</div>
<% end %>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color:#bbffbb;">Admin <span class="caret"></span></a>
<ul class="dropdown-menu">
<% if session[:user_id] %>
<li><%= link_to "Orders", orders_path%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Products", products_path%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Users", users_path%></li>
<li role="separator" class="divider"></li>
<li><%= link_to "Logout", logout_path, method: :delete%></li>
<% else %>
<li><%= link_to "Login", login_path%></li>
<% end %>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color:#bbffbb;">Language <span class="caret"></span></a>
<ul class="dropdown-menu">
<% LANGUAGES.each do |language|%>
<li><a href=""><%= link_to language[0].to_s, store_index_url(locale: language[1]) %></a></li>
<% end %>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Я получил большую часть этого кода из примера в документации по начальной загрузке иЯ внедрил в него какой-то erb, чтобы интегрировать его с моим Rails-проектом.Форма class = "navbar-form navbar-left" - это то место, где начинается панель поиска.Мне нужно поведение, чтобы заполнить оставшееся пространство между неупорядоченными списками справа и слева и отрегулировать его размер на основе текущего размера экрана.
Я экспериментировал с дисплеем flex и flex-grow, плавающим и переполнением.Не могу заставить что-нибудь работать.Я не включаю свой файл CSS, так как в нем только некоторые изменения шрифта / цвета, большая часть CSS в любом случае взята из начальной загрузки.
Любая помощь / руководство приветствуется:)