html - 如何在 rails 4 中将部分表单呈现为水平表单

标签 html css ruby-on-rails form-for

我的主页上有一个部分(由 ajax 触发),其中包含一个表单。我希望表格水平显示而不是垂直显示。我已经尝试了所有方法,例如包装 <form class="form-inline">我试过了 <%=f.number_field :pointsSpend, :class => "checkbox inline"%>然后将 css 更改为 display: inline但似乎都不起作用

部分呈现的主要形式:

 <div class="row">
        <div class="col-md-12">
            <%= link_to image_tag("biceps.jpg"),'#', id: 'ChallengeButton', class: "btn btn-lg btn-primary" %>
            <div id="challengeCentre"></div>
        </div>
    </div>

表格

<%= form_for(@challenge) do |f| %>

  <% if @challenge.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@challenge.errors.count, "error") %> prohibited this challenge from being saved:</h2>

      <ul>
      <% @challenge.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :pointsSpend %><br>
    <%= f.number_field :pointsSpend %>
  </div>
  <div class="field">
    <%= f.label :rules %><br>
    <%= f.text_area :rules %>
  </div>

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

</form>

最佳答案

您应该能够像这样将类传递给 form_for 方法:

<%= form_for(@challenge, html: { class: 'form-inline' }) do |f| %>

  <% if @challenge.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@challenge.errors.count, "error") %> prohibited this challenge from being saved:</h2>

      <ul>
      <% @challenge.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :pointsSpend %><br>
    <%= f.number_field :pointsSpend %>
  </div>
  <div class="field">
    <%= f.label :rules %><br>
    <%= f.text_area :rules %>
  </div>

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

</form>

关于html - 如何在 rails 4 中将部分表单呈现为水平表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31466111/

相关文章:

ruby-on-rails - Capistrano 部署 ** 主机 key 验证失败

ruby-on-rails - 有测试血统的工厂

javascript - 如何获取用户必须单击才能出现在文本 div 中的 div 的名称?

html - 适合内容窗口的滚动条

html - 使用背景图像创建两个 Angular div 的最佳方法?

html - Bootstrap Carousel 影响更改幻灯片上的所有字体

ruby-on-rails - 怎样做才能有利润?

html - AMP HTML 是否允许使用 div 样式?

html - css 无法以正确的方式加载字体

html - 设置最小高度等于宽度