javascript - 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%;