无法使用中的ListGroup元素更改Col React-Bootstrap宽度

Question

我在这里打算在我的地图方法中更改我的col宽度。我知道在React中，我们可以使用xs = {6}等在Bootstrap中设置Col宽度，以更改行的宽度。但由于某种原因，我没有想要工作的地方。如果有人能看到为什么这样做不起作用，我会很高兴。

我已经从Bootstrap React的官方文档中尝试了许多方法来执行此操作，我想知道容器中的ListGroup是否不是问题。

正如您在所附的屏幕截图中所看到的，我想保留图像和第二列之间的空间，因此减小第一列的宽度。与第三列相同，我想将其更改为较小。

非常感谢您的宝贵帮助。

class ShopResume extends Component {
  state = {};
  render() {
    return (
      <Container>
        <ListGroup>
          {this.props.filteredResults.map((detail, index) => (
            <ListGroup.Item>
              <Row>
                <Col xs={4}>
                  <Image
                    alt=""
                    src={detail.imgURL}
                    width={150}
                    height={150}
                    rounded
                  />
                </Col>
                <Col xs={6} >
                  <h3 class="shop_title">{detail.nom}</h3>
                  <StarRatings
                    rating={this.props.rating}
                    starRatedColor="#DAA520"
                    changeRating={this.changeRating}
                    numberOfStars={5}
                    starDimension="15px"
                    name="rating"
                    starSpacing="2px"
                  />
                  <p id="resume">{detail.resume}</p>
                </Col>
                <Col xs={2}>
                <Row>
                  {detail.startPrice === ""
                    ? "Sur devis"
                    : "A partir de " + detail.startPrice + " €"}</Row>
                  <Row><Link to="/shopDetail">
                    <Button
                      className="detailButton"
                      id={index}
                      variant="primary"
                      onClick={this.props.filterClick}
                    >
                      Détails
                    </Button>
                  </Link></Row>
                </Col>
              </Row>
            </ListGroup.Item>
          ))}
        </ListGroup>
      </Container>
    );
  }
}

SCREEN SHOT OF ACTUAL PAGE