css - Bootstrap 和 Rails 搜索表单的连接

Question

我正在做一个元素，我目前正在构建着陆页，我希望在中心有一个搜索栏

我观看了有关功能的 GoRails 教程，一切正常，但我在将 Bootstrap 与 Rails 连接以进行布局时遇到问题，以便搜索按钮紧挨着表单并连接到它。目前似乎有一个换行符，按钮在另一行。我已经尝试了几个不同的类(class)，但到目前为止还没有找到解决方案。谁能给我提示问题出在哪里？

这是我为搜索栏使用的代码:

<div id="landing-search-input">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
           <%= form_with url: search_path, local: true, method: :get, html: { class: "form-inline" } do |form| %>
               <%= form.text_field :q, placeholder: "Search", size: 40, data: { behavior: "autocomplete" }, class: "form-control" %>
               <%= form.button "Search", class: "btn btn-outline-success" %>
           <% end %>
       </div>
    </div>
</div>

提前致谢!

Answer 1

我认为您需要管理 form.text 和 form.button，尤其是当您将 form-control 交给 form-text 后，它将保留所有提供的行并将下一个对象推到它下面，这里是可能的更正可以工作

<div id="landing-search-input">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
           <%= form_with url: search_path, local: true, method: :get, html: { class: "form-inline" } do |form| %>
               <div class="row form-group">
                  <div class="col-sm-8">
                    <%= form.text_field :q, placeholder: "Search", size: 40, data: { behavior: "autocomplete" }, class: "form-control" %>
                  </div>
                  <div class="col-sm-4">
                    <%= form.button "Search", class: "btn btn-outline-success form-control" %>
                  </div>
                </div>
           <% end %>
       </div>
    </div>
</div>