使用 simple_form 以特定分辨率隐藏标签

Question

我在 simple_forms

中有这个包装器

config.wrappers :styled_horizontal_boolean3, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly
  b.use :label, class: 'hidden-sm hidden-xs col-md-3 control-label'

  b.wrapper tag: 'div', class: 'col-md-9 checkbox-margin' do |wr|
    wr.wrapper tag: 'div', class: 'styled checkbox' do |ba|
      ba.use :label_span_input, class: 'col-md-9', span_class: 'left'
    end

    wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    wr.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end
end

这将在较低的分辨率下隐藏控制标签，这很棒，请参见屏幕截图：

但我需要找到一种方法在较大的分辨率下隐藏复选框的标签，否则它会被渲染两次，请看截图：

编辑：这是由 simple_form

生成的 HTML

<label class="boolean optional checkbox" for="timesheet_report_uninvoiced">
  <input class="boolean optional col-md-9" id="timesheet_report_uninvoiced" name="timesheet_report[uninvoiced]" type="checkbox" value="1">
  <span class="left">    </span>Uninvoiced only
</label>

Answer 1

看看 Bootstrap 的 responsive utility classes。例如，您可以添加 hidden-md 和 hidden-lg 类以在中型和大型屏幕上隐藏它

Answer 2

我是这样完成的：

config.wrappers :styled_horizontal_boolean3, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly
  b.use :label, class: 'hidden-sm hidden-xs col-md-3 control-label'

  b.wrapper tag: 'div', class: 'col-md-9 checkbox-margin hide-text-medium-large' do |wr|
    wr.wrapper tag: 'div', class: 'styled checkbox' do |ba|
      ba.use :label_span_input, class: 'col-md-9', span_class: 'left'
    end

    wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    wr.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end
end

并将此添加到 CSS:

@media (min-width: 992px)
  .hide-text-medium-large
    color: transparent
    -webkit-touch-callout: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none

这只会使文本透明，复选框保持原样，用户看不到或 select 隐藏的文本。一旦分辨率低于 992，它就会显示出来。完美运行！

使用 simple_form 以特定分辨率隐藏标签

Hide label in certain resolution with simple_form

ruby-on-rails-3

simple-form

twitter-bootstrap