Question

在我的website上，我有一组垂直对齐的按钮;

CSS：

.sidebar {
    position: fixed;
    left: 20px;
    top: 5%;
    width: 120px;}

.sidebar .icons {
    font-size: 30px;
    margin: 21px;
}

的 HTML ：

<section class="sidebar">
    <div class="animation"><a href=""><img class="icons" src=""></a></div>
    <div class="animation"><a href=""><img class="icons" src=""></a></div>
    <div class="animation"><a href=""><img class="icons" src=""></a></div>
</section>

网站的背景图像和中心图像都会相应地进行调整，在移动设备上查看时，这些按钮保持垂直并且不会缩放，从而导致较大的空白区域。

如何使用Bootstrap使这些按钮沿页面顶部水平对齐在移动设备上观看时？

Answer 1

您应该使用网格系统http://getbootstrap.com/css/#grid

我不确定我是否已正确理解它，但由于您使用了引导程序，因此您可以这样做：

<div class="row">
    <div class="col-md-12">
        <div class="animation"><a href=""><img class="icons" src=""></a></div>
    </div>
</div><!-- /.row -->

<div class="row">
    <div class="col-md-12">
        <div class="animation"><a href=""><img class="icons" src=""></a></div>
    </div>
</div><!-- /.row -->

<div class="row">
    <div class="col-md-12">
        <div class="animation"><a href=""><img class="icons" src=""></a></div>
    </div>
</div><!-- /.row -->

<div class="row">
    <div class="col-md-12">
        <div class="animation"><a href=""><img class="icons" src=""></a></div>
    </div>
</div><!-- /.row -->

如何根据设备视口在Bootstrap中将按钮从垂直对齐从水平对齐？

1 个答案: