2

如何在 simple_form 中对齐 2 个集合下拉列表并使它们内联 [drop 1] [drop 2]

上的例子：

http://simple-form-bootstrap.plataformatec.com.br/articles/new

显示如何对齐复选框和单选按钮，但无论我尝试将 2 个集合下拉列表彼此对齐对齐，我都无法做到。

尝试了我可以在这里和在线找到的所有解决方案，包括内联包装、内联类等。没有任何效果:(

= f.input :age_from,
            :collection => 18..60,
            :selected => 18,
            :label => 'Age from',
            :style => "width: 85px !important"

  = f.input :age_to,
            :collection => 18..60,
            :selected => 55,
            :label => 'Age to',
            :style => "width: 85px !important"

HTML：

        <form accept-charset="UTF-8" action="/sessions" class="simple_form form-horizontal" id="new_session" method="post" novalidate><div style="margin:0;padding:0;display:inline"></div>
          <div class="control-group select required"><div class="controls"></div></div>
          <div class='ruler'></div>
          <div class="control-group select optional"><label class="select optional control-label" for="session_age_from">Age from</label><div class="controls"><select class="select optional" id="session_age_from" name="session[age_from]"><option value="18" selected="selected">18</option>

          <option value="60">60</option></select></div></div>
          <div class="control-group select optional"><label class="select optional control-label" for="session_age_to">Age to</label><div class="controls"><select class="select optional" id="session_age_to" name="session[age_to]"><option value="18">18</option>

          <option value="55" selected="selected">55</option>
          <option value="60">60</option></select></div></div>
          <div class='ruler'></div>
          <div class="control-group string optional"></div>
        </form>

CSS：

.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, .form-search .input-prepend, .form-search .input-append, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline .input-prepend, .form-inline .input-append, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
select {
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px;
}
select {
    margin: 0.5em 0;
}
select {
    background-color: #FFFFFF;
    border: 1px solid #BBBBBB;
    width: 220px;
}
select, input[type="file"] {
    height: 30px;
    line-height: 30px;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border-radius: 3px 3px 3px 3px;
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 9px;
    padding: 4px 6px;
}
input, button, select, textarea {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
label, input, button, select, textarea {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
}
button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: middle;
}
4

1 回答 1

4

一种选择是只使用引导布局 div 标签来对齐它们。我使用 span3 bc 我的总形式是 span6 但您可以根据需要对其进行修改。

<div class="row">
    <div class="span3"><%= f.input :age_from, :collection => 18..60, :selected => 18, :label => 'Age from', :style => "width: 85px !important" %></div>
    <div class="span3"><%= f.input :age_to, :collection => 18..60, :selected => 55, :label => 'Age to', :style => "width: 85px !important" %></div>
</div>
于 2012-09-18T00:17:40.620 回答