Bootstrap提交按钮在非移动设备上的表单中未对齐

Question

在我的rails形式中：我正在使用form-horizontal。我似乎无法弄清楚如何将我的提交按钮放在我的表单中。

提交按钮从移动色器件访问的形式时不排队：

但提交按钮从平板/计算机访问的形式时，不对准：

这里是我的表单代码：

搜索提供程序

<%= form_tag providers_index_search_results_path, {class: 'form-horizontal'} do |f| %> 


    <div class="form-group"> 
    <%= label_tag :title, nil, class: "control-label col-sm-2" %> 
    <div class="col-sm-5"> 
     <%= text_field_tag :title, nil, class: "form-control col-sm-5" %> 
    </div> 
    </div> 

    <div class="form-group"> 
    <%= label_tag :name, nil, class: "control-label col-sm-2" %> 
    <div class="col-sm-5"> 
     <%= text_field_tag :name, nil, class: "form-control col-sm-5" %> 
    </div> 
    <div class="col-sm-5"></div> 
    </div> 


    <%= button_tag('Submit', class: "btn btn-primary") %> 


<% end %> 

我该如何使提交按钮排列起来？

Answer 1

您必须将按钮放在div.form-group的内部，然后放入网格中。

下面是从自举文档的例子：

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
    <div class="col-sm-10"> 
     <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <div class="checkbox"> 
     <label> 
      <input type="checkbox"> Remember me 
     </label> 
     </div> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-default">Sign in</button> 
    </div> 
    </div> 
</form> 

始终首先检查文档：http://getbootstrap.com/css/#forms-horizontal