Question

我已经使用Bootstrap几个月了，这很简单，但是这个非常简单的任务让我感到困惑。在桌面上，我有一行，左边是大图像标志，右边是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

bootstrap提供图像和按钮的中心对齐类

<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>    <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; } }

在移动视图中将引导程序图像和2个按钮对齐

1 个答案: