复选框不与使用Bootstrap类的提示对齐。
复选框不与使用Bootstrap类的提示对齐。
提问于 2018-02-09 03:56:43
我有一个使用Bootstrap复选框-内联的复选框，复选框嵌入在文本提示符“在*这台计算机上记住我”-复选框出现在*指示的位置。
这是使用Rails教程(Hartl)第9章中的代码片段，使用下面粘贴的代码段。
如何使复选框出现在提示符前？在C9 / AWS上运行这个
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(:session, url: login_path) do |f| %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label :remember_me, class: "checkbox inline" do %>
<%= f.check_box :remember_me %>
<span>Remember me on this computer</span>
<% end %>
<%= f.submit "Log in", class: "btn btn-primary" %>
<% end %>
<p>New user? <%= link_to "Sign up now!", signup_path %></p>
</div>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-09 05:19:29
就Bootstrap而言，这个教程似乎有点过时了。(考虑到Bootstrap 4的发布版本目前还不到一个月，这也就不足为奇了)。
编辑：
在编辑你的问题后，我才意识到你真正想要的是什么(星号最初是隐藏的，所以有点混乱)。
现在，为了使复选框在(“记住我”和“在此计算机上”)之间显示为，您需要在Bootstrap 4中使用以下结构：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-check form-check-inline">
<label class="form-check-label mr-2">Remember me on</label>
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">this computer</label>
</div>
如果希望它在整个提示符前出现复选框，则需要以下HTML：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Remember me on this computer</label>
</div>
相应地调整Rails代码。
有关更多选项，请参阅以下参考资料：
https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48698525
复制相关文章
相似问题
腾讯云开发者
