如何在 bootstrap 和简单表单中对齐多个字段标签

Question

这就是我当前的形式

如您所见，标签没有对齐。我希望它们看起来像这样

这是我所有输入的代码

    <%= simple_form_for [@company], html: { class: 'form-horizontal' },wrapper: :horizontal_form do |f| %>
      <div class="form-group">
        <label class="col-md-1 control-label"></label>
        <div class="col-md-9">
           <%= f.input :name,  :label => "Name of Company" %>
      </div>
      </div>
        <% end %>

Answer 1

因为您正在使用 bootstrap form-horizontal class。要解决此问题，您必须覆盖 bootstrap css。

在您的自定义 css 文件中粘贴到 css 下方（尝试使用您的 class 父文件）

.parent-class .form-horizontal .control-label {
    text-align: left;
}