Question

如何在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;
}

Answer 1

一种选择是只使用bootstrap layout 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>

simple_form无法内联对齐2个集合选择

1 个答案: