對齊按鈕居中地在下面的自舉水平表單佈局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'下面的按鈕對齊。希望有所幫助。