對齊引導圖像和2個按鈕在中心移動視圖

Question

我一直在使用引導了數個月，它是很容易的，但是這個非常簡單的任務是混淆了我。在桌面上，我有一排左側有大圖像標誌，右側有2個按鈕。在移動設備上，圖片徽標應位於中心，圖片徽標下方的2個按鈕也位於中央，因此看起來像一個漂亮整齊的三角形。

我已經嘗試了許多不同的場景，如嵌套在行還創建大量列，但所有的場景使扭曲的移動視圖。

這裏是展示最好的移動，但它仍然是那副與形象標誌對準一點點向左和按鈕不居中很好的代碼。

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-9 col-md-8"> 
      <a href="#"><img src="imagelogo.jpg"></a> 
     </div> 
     <div class="col-xs-9 col-md-4" align=center> 
      <a href="#" class="btn btn-success btn-lg" role="button">Back</a> 
       &nbsp;&nbsp; 
      <a href="#" class="btn btn-default btn-lg" role="button">Forward</a> 
     </div> 
    </div> 
    </div> 

任何關於如何保證移動視圖的想法看起來正確，一切都居中？謝謝

Answer 1

引導提供居中對齊類圖像和按鈕

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-9 col-md-8"> 
      <a href="#"><img src="imagelogo.jpg" class="img-responsive center-block"></a> 
     </div> 
     <div class="col-xs-9 col-md-4" align=center> 
      <a href="#" class="btn btn-success btn-lg center-block" role="button">Back</a> 
       &nbsp;&nbsp; 
      <a href="#" class="btn btn-default btn-lg center-block" role="button">Forward</a> 
     </div> 
    </div> 
    </div> 

如果按鈕不工作添加此CSS代替

.btn{ 
    display:table; 
    margin:0 auto; 
} 

編輯

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-9 col-md-8"> 
      <a href="#"><img src="imagelogo.jpg" class="img-responsive center-mobile"></a> 
     </div> 
     <div class="col-xs-9 col-md-4" align=center> 
      <a href="#" class="btn btn-success btn-lg center-mobile" role="button">Back</a> 
       &nbsp;&nbsp; 
      <a href="#" class="btn btn-default btn-lg center-mobile" role="button">Forward</a> 
     </div> 
    </div> 
    </div> 

試試這個並添加此css

@media (max-width:767px){ 
    .center-mobile{ 
     display:table; 
     margin:0 auto; 
    } 
}