我想要 2 列,左列是视频(纵横比为 16x9),右列是侧边栏(最小宽度)。当窗口的宽度发生变化时,视频应相应调整大小,侧边栏应保持其宽度。
但是,我不明白为什么 .ratio::before 有一个填充顶部。
代码笔: https ://codepen.io/yewzy/pen/PoOxLyO
这是我的代码:
<div class="container" id="main">
<div class="d-flex" id="row-main">
<div class="col-sm-9 col-12">
<div class="flex-grow-1" id="content">
<div class="ratio ratio-16x9">
<video id="vid"></video>
</div>
</div>
</div>
<div class="col-sm-3 col-12" id="sidebar">
<iframe class="chat"></iframe>
</div>