如何在引导程序和简单形式中对齐多个字段标签

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类。要解决此问题，您必须覆盖bootstrap css。

在自定义css文件中粘贴下面的css（尝试使用你的父类）

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