html - Bootstrap 中的响应式表单

Question

我正在学习 Bootstrap 并尝试在我拥有的 Ruby on Rails 元素中实现它。我正在使用 bootstrap 导航栏并试图将其与 rails 集成。我有一个搜索栏，我正在尝试使其响应。我希望搜索表单的宽度填满可用空间，并随着屏幕尺寸的变化而缩小/增大。 bootstrap 中的导航栏已经应用了很多 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>

我从 bootstrap 文档中的示例中获取了大部分代码，并一直在其中实现一些 erb 以将其与我的 Rails 元素集成。表单 class="navbar-form navbar-left"是搜索栏开始的地方。我想要的行为是填充左右无序列表之间的剩余空间，并根据当前屏幕大小调整其大小。

我试验过 display flex 和 flex-grow, floating, & overflow。似乎无法使任何工作正常进行。我不会包含我的 CSS 文件，因为它只有一些字体/颜色变化，大部分 CSS 无论如何都来自 Bootstrap 。

感谢任何帮助/指导:)

Answer 1

我会问一个愚蠢的问题......你的 部分有以下内容吗？

<meta name="viewport" content="width=device-width, initial-scale=1.0">

没有它，Bootstrap 将无法响应。