Html 防止div内的图标塌陷到其他div内

因此，使用HTML、CSS和引导，我在包装的左侧有4个图标，它们的组织类似于一个正方形。但是，当我调整窗口大小时，这些图标会折叠到我下面的控制台后面。我如何防止这种情况发生（最好保持按钮在相同的位置）

下面是CSS和HTML的代码

#设计容器{
显示：无；
背景色：#fff；
位置：绝对位置；
底部：40px；
顶部：120px；
左：10%；
/*工具栏宽度*/
左边距：38px；
/*工具栏边距*/
右：20px；
溢出：隐藏；
边框：1px实心#003399；
/*边框顶部：3倍实心#FFCC00*/
z指数：10；
光标：十字线；
}
#工具振打器{
显示：无；
背景色：#fff；
位置：绝对位置；
底部：40px；
顶部：120px；
左：20px；
宽度：10%；
溢出：隐藏；
z指数：11；
页边距底部：0；
}
#刀具振打器标签img{
位置：相对位置；
宽度：30px；
高度：自动；
利润率：10px 0px；
不透明度：0.3；
过渡：0.2s；
}
#工具振打器[类型=无线电]{
位置：绝对位置；
不透明度：0；
宽度：0；
身高：0；
}
/*图像样式*/
#工具振打器[类型=无线电]+img{
光标：指针；
}
/*格子样式*/
#工具振打器[类型=无线电]：选中+img{
不透明度：1；
}
#toolsWrapper[类型=无线电]：选中+图像：悬停{
不透明度：1；
}
#工具振打器[类型=无线电]+img:悬停{
不透明度：0.7；
}
#侧工具按钮{
边缘底部：20px；
}
#侧工具按钮{
大纲：无；
宽度：20px；
高度：自动；
保证金：0；
填充：0；
边界：0；
背景：无；
光标：指针；
}
#sideToolButtons按钮：悬停>img{
不透明度：1；
}
#sideToolButtons>img{
宽度：100%；
身高：100%；
不透明度：0.7；
}
#sideToolButtons.btn\u禁用img{
不透明度：0.2；
游标：默认值；
}
#sideToolButtons.btn_禁用：悬停>img{
不透明度：0.2；
游标：默认值；
}
#卡尔布顿{
位置：绝对位置；
底部：50px；
宽度：30px！重要；
右：50%；
右边距：-10px！重要；
显示：无；
}
#设计控制台{
宽度：100%；
位置：绝对位置；
底部：0；
身高：60%；
最小高度：180px；
页边距底部：0；
}
#内部控制台{
位置：相对位置；
颜色：#333；
身高：100%；
最小高度：40px；
字号：9pt；
边框：#002774 1px实心；
溢出：隐藏；
填充：3px6px；
}
#innerConsole：悬停{
溢出：自动；
}
#innerConsole>p{
保证金：0；
填充：0！重要；
文本对齐：左对齐；
页边距底部：5px！重要；
}
.最后一项{
字体大小：粗体；
}

线路设计
绘制所需线路设计的草图。如果绘制或调整线，则通道的组成和长度可见。

尝试放置

空白：nowrap在
#toolswraper
的CSS中。引导列从md断点开始。移除md并将img高度设置为最大100%