Question

我创建了一个示例应用程序来玩rails。在呈现页面时，我的网站页面格式出现问题。文本字段从它的先前位置移出位置并且格式刚刚被破坏。请参阅site，然后点击按钮，您就会看到我在说什么。

这是我的控制器：

class BooksController < ApplicationController
  def new
    @books = Book.new
  end

  def show
  end

  def create
    @books = Book.new(book_params)

    if @books.save
      redirect_to new_book_path, :flash => { :success => "Book Added"}
    else
      render 'new'
    end
  end

  def update
  end

  def edit
  end

  def destroy
  end

  private
    def book_params
      params.require(:book).permit(:title, :author, :genre, :no_of_items)
    end  

end

这里是我的观点/ new.html.erb

<h1>Books#new</h1>
<p>Find me in app/views/books/new.html.erb</p>

<% flash.each do |key, value|%>
    <div class="flash <%= key %>"><%= value %></div>
<% end %>


<div class="form-horizontal">
    <div class="control-group row-fluid form-inline">
    <%= form_for @books do |f| %>
            <%= render 'shared/error_message' %>
        <p>
            <div class="fields">
                <%= f.label :title, "Title:"%>
                <%= f.text_field :title %><br/><br/>
            </div>

            <div class="fields">
                <%= f.label :author, "Author:" %>
                <%= f.text_field :author %><br/><br/>
            </div>

            <div class="fields">
                <%= f.label :no_of_items, "No. of Items:" %>
                <%= f.text_field :no_of_items%><br/><br/>
            </div>

            <div class="fields">
                <%= f.label :genre, "Genre:" %>
                <%= f.text_field :genre%><br/><br/>

            </div>


            <p>
                <%= submit_tag "Add book"%>
            </p>
        </p>
    <% end %>
    </div>
</div>

任何人都可以帮我说出发生了什么并解决了这个问题吗？感谢。

解答： 大家好，感谢您的建议，但我通过Rails 3: "field-with-errors" wrapper changes the page appearance. How to avoid this?线程找到了如何解决这个问题。我无法在6小时内回答我的问题，所以我会在限制结束后回答这个问题。

Answer 1

每个标签和输入都包含在div类的其他field_with_errors元素中。

您可以为field_with_errors类提供display: inline-block;属性，或尝试格式化表单，如Bootstrap文档中的示例。

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
</form>

http://getbootstrap.com/2.3.2/base-css.html#forms

Answer 2

您在new.html.erb添加了一些不必要的格式。 rails的优势之一是使用帮助程序（例如form_for

）创建的最少工作量

<h1>Books#new</h1>
<p>Find me in app/views/books/new.html.erb</p>

<% flash.each do |key, value|%>
    <div class="flash <%= key %>"><%= value %></div>
<% end %>


<div class="form-horizontal">
    <div class="control-group row-fluid form-inline">
        <%= form_for @books do |f| %>
            <%= render 'shared/error_message' %>

            <%= f.label :title, "Title:"%>
            <%= f.text_field :title %>

            <%= f.label :author, "Author:" %>
            <%= f.text_field :author %>


            <%= f.label :no_of_items, "No. of Items:" %>
            <%= f.text_field :no_of_items %>

            <%= f.label :genre, "Genre:" %>
            <%= f.text_field :genre %>


            <%= f.submit "Add book" %>
        <% end %>
    </div>
</div>

Answer 3

首先你没有正确对齐你的输入字段，我看到一些边距 - 左边（第一个是60px，第二个是45px ......）所以我建议你删除这个css margin-left输入并将其添加到您的标签：

label {
        width:150px;    /*Or however much space you need for the form’s labels*/
        float:left;
}

这是一个关于如何对齐字段的快速tutorial

然后在您提交带有空字段的表单后，rails会触发一些错误，并将div class="field_with_errors错误的每个字段（也是标签）换行：<div class="field_with_errors"><input type="text"..... /></div>：此 div 将返回您的字段到下一行，这样如果您的字段仍然内联，则只需将此css添加到您的css文件中：

.field_with_errors{
     display: inline;
}

Answer 4

我通过this thread了解了如何解决这个问题。

<rails>呈现</rails>时页面格式分崩离析

4 个答案: