在bootstrap容器div中重叠div - CSS

Question

我正在尝试创建一个声音控制栏，通过控制栏下方的加载栏显示当前播放位置。例如：

这是我的窗口大小中等或大时的样子。但是当它变小时，就变成了这个：

它不仅不再居中，而且它将所有东西都移开，而位置条移动了流动。你会注意到位置栏很好，真正的问题来自游戏控制div瞬间收缩和向左移动。有没有办法来解决这个问题？

HTML：

<div class="container">
     <div class="playBar row"></div>
     <div class="positionBar row"></div>
</div>

CSS：

.container { position: relative }
.playBar { 
  background-color: rgba(173, 173, 173, 0.55);
  border-radius: 5px;
  height: 50px;
  font-size: 27px;
  background: linear-gradient(to bottom, rgba(207, 207, 207, 0.58) 0%,rgba(134, 134, 134, 0.54) 100%);
  z-index: 1;
  position: absolute;
  width: inherit; 
}
.postionBar { 
  border-radius: 5px;
  background-color: #CC5A5A;
  z-index: 10;
  height: 50px; 
}

Answer 1

如果你在栏上设置min-width，它就不会缩小到某一点。

min-width: 100%;