如何对齐按钮从垂直到水平在引导依赖于设备视口



在我的网站上,我有一组垂直对齐的按钮;

CSS:

.sidebar {
    position: fixed;
    left: 20px;
    top: 5%;
    width: 120px;}
.sidebar .icons {
    font-size: 30px;
    margin: 21px;
}


:

<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使这些按钮沿页面顶部水平对齐当在移动设备上观看时?

您应该使用网格系统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 -->

最新更新