CSS行流体没有响应

Question

我是html/css的初学者，我正在尝试创建一些东西，将进入一个名为Chronus平台的页面。这个想法是为了让用户能够点击四个选项中的一个，将他们带到平台的相关部分，这样他们就不必一直"回头"(一种导航，但不是真正的导航)。我按照下面的代码使用了"行流体"。我还附上了一张图片，向您展示它在台式机/笔记本电脑上的外观。问题是，随着设备宽度的减小，所有链接所在的div的高度并没有增加，所以第二个两个链接被切断了(也是附图)。

<div class="row-fluid" style="background-color: #DEEBF9; color: #094183;">
<div class="footerlinks">
<div class="span3">
<p><a href="">Before the match</a></p>
<a href=""><i class="fa fa-arrow-right"></i></a></div>
<div class="span3"><a href=""> </a>
<p><a href="">Career resources</a></p>
<a href=""> <i class="fa fa-arrow-right"></i></a></div>
<div class="span3"><a href=""> </a>
<p><a href="">The mentoring partnership</a></p>
<a href=""> <i class="fa fa-arrow-right"></i></a></div>
<div class="span3"><a href=""> </a>
<p><a href="">Partnership wrap up</a></p>
<a href=""> <i class="fa fa-arrow-right"></i></a></div>
</div>
</div>
<style>
.footerlinks {
text-align:center;
height: 160px;
vertical-align: middle;
padding: 40px;
font-family: ARIAL;
font-size: 20px;
}
</style>

链接在笔记本电脑/台式机窄设备链接

有谁能建议一个解决方案吗?提前谢谢你。

Answer 1

删除.footerlinks的高度。发生这种情况的原因是，当你从一个狭窄的设备上看到它时，你的内容超过了160px。

.footerlinks {
text-align:center;
vertical-align: middle;
padding: 40px;
font-family: ARIAL;
font-size: 20px;
}