Bootstrap 4 删除空白引导

是的，我看了其他问题，但没有找到任何帮助

我试图对齐图像，使每行有3个，但我注意到空白是造成问题的原因

它看起来像什么：

它应该是什么样子的：

HTML:

export default function Form() {
  return (
    // <----- MOBILE ---->

    <Container>
      <div className="mobile-logo-container d-block d-sm-none">
        <Row>
          <Col className="col-sm-11">
            <div className="mobile-card">
              <div className="mobile-card-body">
                <Row>
                  <Col>
                    <img
                      src={aviva}
                      alt="Aviva"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                  <Col>
                    <img
                      src={aig}
                      alt="American International Group"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                  <Col>
                    <img
                      src={lg}
                      alt="Legal and General"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                </Row>
                <Row>
                  <Col>
                    <img
                      src={rl}
                      alt="Royal London"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                  <Col>
                    <img
                      src={zurich}
                      alt="Zurich"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                  <Col>
                    <img
                      src={lv}
                      alt="London Victoria"
                      className="brand-logo"
                      height="75px"
                      width="75px"
                    />
                  </Col>
                </Row>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </Container>
  )
}

导出默认函数表单（）{
返回(
// 
)
}

---

我已经定义了

col-sm-11

，所以对我来说它应该工作正常，因为它正在包装所有其他列/图像。我已尝试删除

边沟

、

填充

和

边距

，但这并没有改变。

我认为您应该使用

col-4

将一行拆分为三分之一，因为12的三分之一是4

下面的例子是你想要达到的目标吗

.row{
宽度：40%；
保证金：1rem 0；
}
.盒子{
宽度：50px；
高度：50px；
填充：1rem；
}
格林先生{
背景颜色：绿色；
}
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}