0

我创建了一个示例应用程序来玩 Rails。呈现页面时，我的网站的页面格式有问题。文本字段从之前的位置移出位置，格式就被破坏了。请查看该站点，然后单击按钮，您就会看到我在说什么。

这是我的控制器：

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”包装器改变了页面外观。如何避免这种情况？线程如何解决这个问题。我无法在 6 小时内回答我的问题，所以我会在限制结束后回答这个问题。

4

4 回答 4

1

每个标签和输入都被包装在一个div带有 class 的附加元素中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

于 2013-08-31T14:19:47.503 回答
0

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

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

这是关于如何对齐字段的快速教程

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

.field_with_errors{
     display: inline;
}
于 2013-08-31T14:30:11.797 回答
0

您添加了一些不必要的格式到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>
于 2013-08-31T14:18:46.360 回答
0

我通过这个线程发现了如何解决这个问题。

于 2013-08-31T22:06:03.597 回答