css - 什么可以使复选框不显示在页面上？

Question

我在 3.2 应用程序中使用 Twitter Bootstrap for Rails，但没有看到复选框出现。

如果我直接用 HTML 查看同一个页面(带有硬编码的复选框，并使用常规的 Bootstrap Assets )，它工作正常。

HTML 代码生成正确，我相信...例如:

<div class="field">
    <div class="control-group check_boxes optional"><label class="check_boxes optional control-label">Listing Type</label><div class="controls"><label class="checkbox"><input class="check_boxes optional" id="search_listing_type_id_1" name="search[listing_type_id][]" type="checkbox" value="1" />For Sale</label><input name="search[listing_type_id][]" type="hidden" value="" /></div></div>
  </div>

这是 Rails 代码:

<%= f.input :listing_type_id, collection: ListingType.order(:name), as: :check_boxes, label: "Listing Type" %>

这是一个live example .在文本“List square footer”旁边应该有一个复选框。向下滚动到便利设施，您会在那里看到一个显然应该有复选框的列表。

这在开发中也不起作用。

不太清楚为什么它没有出现。

想法？

Answer 1

看起来 uniform.js 正在将复选框的不透明度设置为 0。

如果您不使用 uniform.js，请尝试禁用它。

更新:看起来您在 sprite 图像上也遇到了 404？大概是统一的主题 Sprite 图？

GET http://realty-cloud.herokuapp.com/img/sprite.png 404 (Not Found) 

另一个更新:这绝对是问题所在。 Uniform 的工作原理是将输入的不透明度设置为 0，使其不可见，但仍可点击，并稍微更改标记，因此它看起来像这样。

<div class="checker" id="uniform-listing_amenity_ids_4">
  <span>
    <input class="check_boxes optional" id="listing_amenity_ids_4" name="listing[amenity_ids][]" type="checkbox" value="4" style="opacity: 0;">
  </span>
</div>

它在 div.checker span 上设置了一个 css 规则:

div.checker span {
  background-image: url(../img/sprite.png);
}

该图像丢失，因此输入似乎不可见。