1

如何让 will_paginate 与 Rails 项目上的搜索框对齐，该项目主要取自 michael hartl 的 rails 教程。我在rails中拥有的是：

<div class="row">
    <div class= "pull-left">
        <%= will_paginate  %>
    </div>
  <div class="span4 offset4 pull-right">
        <%= form_tag users_path, :method => 'get', class: "navbar-search" do %>
        <%= text_field_tag :search, params[:search], class: "search-query span3" %>
        <%= submit_tag "Search", :name => nil, class: "btn btn-primary" %>
        <% end %>
    </div>
</div>

这导致了这个 html（请参阅此处以获取 jsfiddle 中的 html）：

<div class="row">
<div class="pull-left">
<div class="pagination">
<ul>
<li class="prev previous_page disabled">
<a href="#">← Previous</a>
</li>
<li class="active">
<a href="/users?page=1&search=&utf8=%E2%9C%93" rel="start">1</a>
</li>
<li>
<a href="/users?page=2&search=&utf8=%E2%9C%93" rel="next">2</a>
</li>
<li>
<a href="/users?page=3&search=&utf8=%E2%9C%93">3</a>
</li>
<li>
<a href="/users?page=4&search=&utf8=%E2%9C%93">4</a>
</li>
<li class="next next_page ">
<a href="/users?page=2&search=&utf8=%E2%9C%93" rel="next">Next →&lt;/a>
</li>
</ul>
</div>
</div>
<div class="span4 offset4 pull-right">
<form class="navbar-search" method="get" action="/users" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8">
</div>
<input id="search" class="search-query span3" type="text" value="" name="search">
<input class="btn btn-primary" type="submit" value="Search">
</form>
</div>
</div>

现在您可以看到：这里 搜索框在 will_paginate 链接上方，我如何使它们彼此内联？
（另外在jsfiddle中，搜索按钮没有与搜索栏内联，如果你能告诉我为什么会这样，那在我的网站上不会发生，我复制了html，加分）

4

3 回答 3

1

为什么不尝试在顶部添加一些边距？

在搜索的 div: 上试试这个margin-top: 10px;。

于 2013-06-26T13:42:04.207 回答
1

您看到所有这些事情发生的原因是由于您正在导入 Twitter Bootstrap 的 CSS 样式。同样的原因也解释了在搜索输入后按钮断行 - 这是由于.span4类的设置宽度。以下是至少在视觉上为我固定的样式：

.top-nav .span4{
    width:auto;
}
.top-nav .span4 .navbar-search{
    margin:20px 0;
}

这是一个JSFiddle来演示它所实现的效果（注意我.top-nav在包装元素中添加了一个额外的类，更具体地说是使用 CSS 选择器定位元素）。

不管怎样，祝你好运！开始使用 CSS 框架可能有点棘手，因为要考虑很多预先编写的样式。

于 2013-06-26T13:45:24.047 回答
0

在视图文件中，

<div class= "pull-left">
        <%= will_paginate  %>
</div>

我猜这个 div 占用了 100% 的宽度。所以请尝试向它添加一个新类，您可以在其中定义其宽度，以便您的搜索部分排成一行。

于 2013-06-26T13:47:23.077 回答