Html 如何根据设备视口在引导中从垂直到水平对齐按钮？

在我的电脑上，我有一组垂直对齐的按钮，如下所示：

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>

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

如何使用引导使这些按钮沿页面顶部水平对齐

---

在移动设备上查看时？

您应该使用网格系统

我不确定我是否正确理解了它，但因为您使用的是引导，所以可以这样做：

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

您是否查看了css的@media？如果您查看引导程序的组件部分，您将看到可以使用的各种项目。其中之一是导航，以及按钮组等。它将通过文档为您提供使用页面上此项所需的所有信息。通常，导航项目和其他组件都是为响应而构建的。