5

我将 Rail 的“f_date_select”与 Twitter Boostrap 一起使用，结果如下所示。但是，我希望选择框更小（〜一半大小）。

我怎样才能做到这一点？

<%= f.label :start_date, :class => "control-label"%>
<%= f.date_select :start_date, :prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }  %>
<%= f.label :end_date, :class => "control-label"%>
<%= f.date_select :end_date, :prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }  %>

4

2 回答 2

10

他们从引导程序中的选择元素中获取宽度：

select {
  width: 220px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
}

要修复，请在覆盖文件的底部添加您自己的：

select.date-select {
    width:auto;
    border: 1px solid #cccccc;
    background-color: #ffffff;
}

下一个问题是将类应用于 date_select 元素。如果你只是把 :class => "date-select" 扔进去，Rails 不会识别出你正在尝试同时使用选项和 html_options。相反，您必须将每个作为哈希传递：

<%= f.date_select :start_date, {:prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }}, {:class => 'date-select'}  %>

这会将您的课程日期选择应用于生成的三个选择对象中的每一个。

于 2013-02-17T20:45:30.447 回答
1

从记忆来看，样式选择框是一场噩梦，因为它们更像浏览器组件（即，无论样式如何，它们在不同浏览器中呈现不同）。

由于您使用的是 Bootstrap，尽管您可以随意使用他们的 jQuery 下拉组件和样式。

您必须调整 Rails 代码以适应。

于 2013-02-14T02:03:34.467 回答