Label is getting displayed below checkbox

£可爱£侵袭症+ 提交于 2019-12-05 16:07:53

I used following to fix the issue without overriding style of twitter bootstrap css.

<%= f.label :openid_enabled, class: 'checkbox' do %>
  <%= f.check_box :openid_enabled %>
  OpenID
<% end %>

Which generates following HTML

<label for="application_openid_enabled" class="checkbox">
  <input type="hidden" value="0" name="application[openid_enabled]">
  <input type="checkbox" value="1" name="application[openid_enabled]" id="application_openid_enabled">
  OpenID
</label>

Here is reference http://twitter.github.com/bootstrap/base-css.html

Thanks @MyHeadHurts and @Dipaks for your invaluable inputs.

This must be happening because either input or label is set as display: block; You can show it in one line by making these elements inline -

input, label{ display: inline; }

I know its old but the best way to do it today would be to use the checkbox-inline class on the label.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!