Bootstrap col-sm-offset-2 不对齐表单中的按钮

Question

为什么 col-sm-offset-2 不以这种形式将按钮 'two' 与上方的 col-sm-2 标签对齐？

我使用空标签（请参阅按钮“一”）对其进行了蹩脚的修复，但我想了解如何使用更简洁的代码并使其正确，以便我的所有表单中都没有按钮的杂乱标签。

<form class="form-horizontal" role="form" action="/company/create" method="post">

  <div class="form-group">
     <%= label_tag(:name, 'Company name:', :class => 'control-label col-sm-2') %>
     <div class="col-sm-4">
        <%= text_field_tag(:name, @company.name, :class => 'form-control') %>
     </div>
  </div>

  <div class="form-group">
     <%= label_tag(:category, 'Category:', :class => 'control-label col-sm-2') %>
     <div class = 'col-sm-4'>
        <%= collection_select(nil, :category_id, Category.all, :id, :description, :include_blank => 'select') %>
     </div>
  </div>

  <div class="form-group">
    <%= label_tag(:x, '', :class => 'col-sm-2') %>
    <div class='col-sm-2'>
        <button type="submit" class="btn btn-primary">one</button>
    </div>
  </div>

  <div class="form-group">
     <button type="submit" class="btn btn-primary col-sm-offset-2">two</button>
  </div>
</form>

Answer 1

第 1 步：围绕您的按钮构建一个 DIV。
第 2 步：为该 DIV 指定“col-sm-2 col-sm-offset-2”类。
第 3 步：将您的 BUTTON 放在那个 DIV
第 4 步：如果这解决了您的问题，请给我反馈。

<div class="form-group">
  <div class="col-sm-2 col-sm-offset-2">
   <button type="submit" class="btn btn-primary">two</button>
  </div>
</div>