Question

我有一个不错的自举导航菜单，里面有一个搜索框。

我在部分档案中得到了它......

      <form class="navbar-form navbar-left">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

我喜欢这个搜索框的布局。不幸的是，我无法弄清楚如何让我的rails搜索框看起来一样......

<%= search_form_for @search do |f| %>
<div class="field">
  <%= f.label :title_or_template_cont, "Search" %>
  <%= f.text_field :title_or_template_cont %>


</div>
 <div class="actions">
<%= f.submit "Search" %>

我需要在rails表单中进行哪些更改才能看起来像引导搜索框？

我在rails搜索框中尝试了几个类，但它的外观并不接近。

有什么建议吗？

Answer 1

  <form class="navbar-form navbar-left">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

结帐宝石＆＃34; Simpleform＆＃34;所以你可以使用他们的帮助器在rails中轻松地使用css为表单设置样式。然后：

<%= simple_form_for @search, html: {class: "navbar-form navbar-left"} do |f| %>
  <div class="form-group">
    <%= f.input_tag :title_or_template_cont, label: false, input_html: {class: 'form-control'}, placeholder: 'search' %>
  </div>
 <div class="actions">
<%= f.submit "Search", class: "btn btn-default" %>

bootstrap搜索rails外观

1 个答案: