我有6个不同宽度的徽标,我想在响应式横幅中显示如下:
通过在每个徽标元素上分配以下类,可以在引导程序中轻松完成此行为:col-lg-2 col-md-2 col-sm-4
但是,我想使用flexbox在每个徽标之间强制实现一致的间距:
// html
<div class="logo-container">
<img class="logo"/>
<img class="logo"/>
<img class="logo"/>
<img class="logo"/>
<img class="logo"/>
<img class="logo"/>
</div>
// css
.logo-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
这样可以很好地工作,但仅限于桌面视图。一旦我开始缩小屏幕,flex-wrap
开始确保徽标保留在容器中,但行中的每行中的徽标数量不会相同。
我最终得到1行5徽标+ 1行1徽标,或1行4徽标+ 1行2徽标。