rails bootstrap 和对齐复选框答案

【问题标题】：rails bootstrap and aligning checkboxesrails bootstrap 和对齐复选框
【发布时间】：2017-11-26 22:03:14
【问题描述】：

我正在尝试水平对齐一个复选框，它是 Rails 中的标签。我也在使用引导程序。任何帮助表示赞赏。

    <p>
      <%= label_tag(:relo, "Willing to relocate:", class: "checkbox") %>
      <%= check_box_tag :relo, value = "true", checked = false, class: "" %>
    </p>

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

垂直对齐有时需要两个相邻的内联元素才能正常工作。

'nowrap' 表示整个标签文本始终位于复选框旁边。

在您的 css 文件中...

.checkboxes label {
 display: block;
 float: left;
 padding-right: 10px;
 white-space: nowrap;
 }

.checkboxes input {
 vertical-align: middle;
 }

.checkboxes label span {
 vertical-align: middle;
 }

在你看来……

<form>
  <div class="checkboxes">
     <label for="x"><input type="checkbox" id="x" /> <span>Label text      x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

【讨论】：

这不是导轨，它只是 HTML。问题是如何在 Rails 应用程序中获取复选框以与标签对齐。