Html 引导-带有进度条的自定义警报

我正在尝试自定义bootstrap 3.3.7 alert类，以便添加进度条和内联项以实现类似的效果虚线只是为了演示项目是对齐的：

但是，我在安装进度条时遇到了问题，进度条位于右侧部分的底部，宽度为100%。还有，我要把左边部分的高度调整到100%，只是中间的图标。 我不确定我是否使用了正确的css策略，但这就是我迄今为止所做的：

/* !重要信息仅用于覆盖代码段中的引导css*/ .alertContainer{ 边界半径：0！重要； 边框宽度：0！重要； 填充：0！重要； 高度：自动！重要； 位置：绝对！重要； 底部：15px！重要； 左：0； 右：0； 保证金：0自动！重要； 宽度：480px！重要； } .左半部分{ 显示：内联块！重要； 身高：100%！重要； 宽度：32px； 字体大小：22px； 背景色：31708f； 颜色：d9edf7； } .leftPartContent{ 填充：0 5px； } .右侧{ 显示：内联块； 身高：100%； 宽度：438px； } .rightPartContent{ 显示器：flex； 对齐项目：居中； } .结束{ 位置：绝对！重要； 右：15px！重要； } .进展{ 页边距底部：0px！重要； 底部：0px！重要； 左：0px！重要； 宽度：100%！重要； 高度：5px！重要； } &时代； 2018-15-06，下午1:29 你好，世界！ /* !重要信息仅用于覆盖代码段中的引导css*/ .alertContainer{ 边界半径：0！重要； 边框宽度：0！重要； 填充：0！重要； 高度：自动！重要； 位置：绝对！重要； 底部：15px！重要； 左：0； 右：0； 保证金：0自动！重要； 宽度：480px！重要； 显示：表格； } .左半部分{ 文本对齐：居中； 宽度：55px； 字体大小：22px； 高度：75px； 背景色：31708f； 颜色：d9edf7； 显示：表格单元格； 垂直对齐：中间对齐； } .右侧{ 垂直对齐：中间对齐； 显示：表格单元格； 宽度：438px； } .结束{ 位置：绝对！重要； 右：15px！重要； } .进展{ 页边距底部：0！重要； 底部：0px！重要； 左：0px！重要； 宽度：100%！重要； 高度：5px！重要； 位置：绝对位置； 边界半径：0； } 按钮，关闭{ 线高：40px； } &时代； 2018-15-06，下午1:29 你好，世界！

---

为什么这个问题有这么多反对票？因为我被一些用户攻击了