对齐按钮居中地在下面的自举水平表单布局3

Question

我有以下布局和这里是布局

<div class="container-fluid" >  
    <div class="row"> 
    <div class="col-xs-12 col-sm-5"> 
     <label><strong>Field One</strong></label> 
     <div class="form-group"> 
     <input type="text" class="form-control"> 
     </div> 
    </div> 

    <div class="col-xs-12 col-sm-1"> 
     <div class="invisible hidden-xs" style="padding-top: 11px"> 
     &nbsp; 
     </div> 
     <div class="form-group"> 
     <strong>OR</strong> 
     </div> 
    </div> 

    <div class="col-xs-12 col-sm-4"> 
     <label><strong>Other Field</strong></label> 
     <div class="form-group"> 
     <input type="text" class="form-control"> 
     </div> 
    </div> 
    </div> 
    <div class="row text-center"> 
    <div class="col-sm-12"> 
     <button class="btn btn-primary" type="button">Button</div> 
    </div> 
    </div> 
</div> 

当处于非移动模式下，我想输入占用尽可能多的空间的jsbin可能与位于输入之间的或标签位于一起。

然后我需要按钮居中，但我有困难，因为我想输入为col-sm-5和col-sm-6，但由于这是奇数列，因此难以获得按钮居中。

Answer 1

要将您的按钮与表格对齐，请为其添加5的偏移量。添加类col-md-offset-5并使按钮col-md-1。让col-sm类保持原样。这将始终将表单中'OR'下面的按钮对齐。希望有所帮助。