Css 引导和Rails搜索表单的连接

我正在项目中，我目前正在建设的登录页，我想在中心有一个搜索栏

我观看了GoRails的功能教程，一切正常，但我在将引导程序与布局的Rails连接时遇到了问题，因此搜索按钮就在表单旁边并连接到表单。目前似乎有一个断线，按钮在另一行。我已经尝试了几个不同的课程，但到目前为止还没有找到解决方案。谁能告诉我问题出在哪里吗

这是我正在使用的搜索栏代码：

<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>

---

提前谢谢

我认为您需要管理form.text和form.button，特别是因为您将form控件赋予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>

非常感谢！它是有效的：）JFYI-在您答案的按钮行中有“%”太多了，我刚刚更正，如果您有时间，请回答这个问题