引导容器 - 由于绝对定位，包含宽度超过 100% 的 div

Question

我将 100% 的 div 放入引导容器中。一些 div 具有额外的元素，这些元素使用绝对定位定位到容器之外：

.inst-link {
    color:#414447db;
    background-color: transparent;
    font-size: 3rem;
    margin-bottom: 1rem;
    border: 1px solid #ECEFEF;
    box-shadow: 0 1px 3px #d1d1d1;
    transition: box-shadow 100ms ease-in-out;
    width: 100%;
    padding: 15px 20px;
    outline: none;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: flex-end;
    position: relative;
}
.inst-link::before {
    font-family:"Font Awesome 5 Free";
      content: '\f359';
      color: #2ecc71;
      position: absolute;
      right: 0;
      margin-right: -50px;
}

相关的html：

<div class"container">
    <div class="inst-link"></div>
</div>

如您所见，div inst-link 的相邻元素具有容器 div 无法考虑的绝对定位。

结果是，在大多数屏幕宽度上它看起来都不错，但在每个断点之前，绝对定位的元素都会超出屏幕。换句话说，就在断点之前，当 div 变小时，绝对定位的元素会出现在屏幕之外。我猜一个选项是改变断点？

什么是解决问题的好方法？

谢谢

Answer 1

容器代表内容的最大宽度。如果您在低宽度设备（平板电脑或移动设备）上的包装之外有内容。内容溢出视口。 您可以使用媒体查询将其隐藏

@media (min-width: 960px) {
    .inst-link::before {
        font-family:"Font Awesome 5 Free";
        content: '\f359';
        color: #2ecc71;
        position: absolute;
        right: 0;
        margin-right: -50px;
    }
}