bootstrap容器-由于绝对定位而包含宽度超过100％的div

Question

我要将100％的divs放入引导容器中。一些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;
    }
}