对齐引导图像和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; 
    } 
}