响应式引导4英尺

Question

我正在努力弄清楚为什么我的3列脚不能在手机等小屏幕上显示每个列的顶部。它是使用Barrio主题构建的Drupal子主题

布局的HTML

<footer class="site-footer">
<div class="container">
<div class="site-footer__top clearfix">
<section class="col region region-footer-first"></section>
<section class="col region region-footer-second"></section>
<section class="col region region-footer-third"></section>
</div>
</div>
<footer>

CSS(去掉不相关的东西，比如颜色等):

footer {display: block;}
.container {padding-left: 0; padding-right: 0;}
.site-footer__top {display: flex;}
.col {flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;position: relative; width: 100%;}

我的印象是，.col类足以获得这里解释的所需行为，我看不到CSS中的任何问题。

你能明白为什么我的代码没有按照期望的方式运行吗?

,

Answer 1

为什么我的3列脚不显示每个列的顶部其他在手机等小屏幕上。

尝试以下操作

footer {
display: block;
}
.container {
padding-left: 0; 
padding-right: 0;
}
@media only screen and (min-width: 678px) {
.site-footer__top {
display: flex;
}
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
position: relative;
width: 100%;
}
}

演示