Question

我在Rails上运行一个使用Bootstrap的网站。内联复选框在Chrome和Safari中呈现正常，但在Firefox或IE中则不行。

Firefox or IE (Not correct) 该复选框位于标签中心，该标签不正确。

我已将Bootstrap gem添加到我的rails应用程序中。

的Gemfile

gem 'bootstrap-sass', '~> 3.3.5'
gem 'sass-rails', '~> 5.0'

custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

login.html.erb

<%= f.label :remember_me, :class => "checkbox-inline" do %>
      <%= f.check_box :remember_me%>Remember me on this computer?
<% end %>

在浏览器中呈现的代码

<label class="checkbox-inline" for="session_remember_me">
      <input name="session[remember_me]" type="hidden" value="0">
      <input type="checkbox" value="1" name="session[remember_me]" id="session_remember_me">Remember me on this computer?
</label>

我在测试Rails应用程序中添加了Bootstrap CDN，并在所有浏览器中正确呈现了复选框。我并不反对删除Bootstrap gem并切换到CDN但是想先咨询SO人群。谁看过这个吗？有没有更简单的解决方案？

谢谢！

大卫

Answer 1

我昨晚搞定了这个。

我将以下内容添加到我的.css

中

/*Check box in the middle of the text fix*/

.checkbox {
    width: 15px;
    height: 15px;
    float: left;

}
.checkbox-inline {
    float: left;
    padding-left: 3px;
    margin-bottom: 15px;
    margin-left: 10px;
    padding: 15px


}

.radio {
    width: 15px;
    height: 15px;
    float: left;

}
.radio-inline {
    float: left;
    padding-left: 3px;
    margin-bottom: 15px;
    margin-left: 10px;
    margin-right: 15px;

}

这是我在View中所做的一个示例，它导致复选框位于标签文本的中间。

  <%= f.label :remember_me, :class => "checkbox-inline" do %>
      <%= f.check_box :remember_me%>Remember me on this computer?
  <%= end %>

我把它更改为：

<label class="checkbox-inline">
    <%= f.check_box :remember_me, class: "checkbox" %>
    Remember me on this computer?
</label>

您可能需要使用padding-left才能让它看起来正确。到目前为止，这已经修复了我在Firefox和IE 11上的问题，它仍然可以在Safari和Chrome中正确呈现。

祝你好运！

内联复选框可在Chrome和＆...中正确显示Safari但不是FireFox＆amp; IE

1 个答案: