使用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

我能够像这样完成它：

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

这样只会使文字透明，复选框保持原样，用户无法查看或选择隐藏文字。一旦分辨率低于992，它就会被显示出来。效果很好！

Answer 2

看一下Bootstrap的responsive utility classes。您可以添加例如添加MainActivity和fragment类以在大屏幕和大屏幕上隐藏它