html - 如何根据设备视口(viewport)在 Bootstrap 中将按钮从垂直对齐到水平？

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

我不确定我是否理解正确，但由于您使用的是 Bootstrap ，您可以这样做:

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