React Bootstrap-进度条上的宽度太小

Question

我正在使用React Bootstrap和CSS Grid。每当我将其放在网格系统中时，进度条都太小，但在其他地方也可以正常使用。

我不知道问题是否来自React引导程序，或者CSS网格阻碍了进度条的宽度

这里是源代码。我觉得条形的宽度与存在的列数成正比。如果是这种情况，那么我如何合并这些列以形成一个列？

// JSX
<div className="item2">
        <Combat />
      </div>
      <div className="item3 w-100">
        <p>Progressbar</p>
        <ProgressBar
          variant="length"
          now={increment}
          label={`${increment}`}
        />
        <p>{storeMoves}</p>
      </div>
      <div className="item4">details</div>
      <div className="item5">profile-left</div>
      <div className="item6">profile-right</div>
    </Modal.Body>
    <Modal.Footer>
      <Button variant="primary" onClick={close}>
        Save Changes
      </Button>


CSS
.item1 {
  grid-area: image;
  height: 250px;
}
.item1 img {
  max-height: 80px;
}
.item2 {
  grid-area: stats;
  height: 250px;
}
.item3 {
  display: flex;
  flex-direction: column;
  grid-area: progressBar;
  height: 250px;
}

.item4 {
  grid-area: details;
  height: 10px;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "image image stats progressBar progressBar progressBar"
    "details details details details details details"
    "profile-left profile-left profile-left profile-right profile-right profile-right";
  grid-gap: 2px;
  background-color: #fff;
}

.grid-container > div {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
  background-color: rgb(230, 228, 228);
}

Answer 1

我刚刚发现了问题。我正在设置.progress-bar而不是.progress的宽度。将.progress的宽度设置为100％之后，我现在可以获取完整宽度。