我试图用图像解释我的问题，但不幸的是，我似乎无法发布一架喷气机，所以我试图解释我的问题。我需要在我的网站的主体2 divs（容器）顶部白色和底部灰色。然后需要一个蓝色的盒子正好漂浮在这两个容器的中间，而不是100％的宽度，而是大约80％。 容器中的图标需要清晰，不要放在蓝框下面。 我试图用相对位置做到这一点，并在那里得到一个减去顶部但显然根本不起作用，因为它分崩离析响应明智。 我能做些什么才能让这件事发生得很好？
HTML：
<div class="container">
<div class="col-md-3">
<div class="icon2"></div>
<p class="txt-fix-2">....</p>
<p class="txt-fix-3">...</P>
</div>
<div class="col-md-3">
<div class="icon1"></div>
<p class="txt-fix-2">...</p>
<p class="txt-fix-3">...</P>
</div>
<div class="col-md-3">
<div class="icon2"></div>
<p class="txt-fix-2">.....</p>
<p class="txt-fix-3">......</P>
</div>
<div class="col-md-3">
<div class="icon1"></div>
<div class="primero-bot-icons">
<div class="container">
<div class="col-md-3">
<div class="icon2"></div>
<p class="txt-fix-2">...</p>
<p class="txt-fix-3">...</P>
</div>
<div class="col-md-3">
<div class="icon1"></div>
<p class="txt-fix-2">....</p>
<p class="txt-fix-3">...</P>
</div>
<div class="col-md-3">
<div class="icon2"></div>
<p class="txt-fix-2">...</p>
<p class="txt-fix-3">...</P>
</div>
<div class="col-md-3">
<div class="icon1"></div>
<p class="txt-fix-2">...</p>
<p class="txt-fix-3">...</P>
</div>
<div>
<p class="bot-btn-bg">
<button type="button" class="btn btn-primary extra"> > pri</button>
<button type="button" class="btn btn-primary extra">> ...</button>
</p>
</div>
</div>
</div>
<p class="txt-fix-2">.....</p>
<p class="txt-fix-3">.....</P>
</div>
</div>