删除图像右侧的空白答案

【问题标题】：Remove whitespace to the right of image删除图像右侧的空白
【发布时间】：2021-04-13 23:49:38
【问题描述】：

我正在使用 Bootstrap 和 React。我的图像在右侧产生空白。

但我已经检查了元素，但似乎无法删除它。我在网上查看了BootstrapCol，但仍然无法发现问题。我没有任何与 Col 或 img 相关的 CSS，但我尝试过 padding-right: 0px !important 和 margin-right: 0px

HTML：

 <Container>
      <Row>
        <Col>
          <div className="form-border">
            <div className="form-box">
              <h1 className="form-title">Compare Cheap Life Insurance</h1>
                <Row className="logo-border">
                  <Col className="logo-col">
                    <img src={aviva} alt="aviva" className="brand-logo" height="75px" width="75px" />
                  </Col>
                  <Col className="logo-col">
                    <img src={aig} alt="aig" className="brand-logo" height="75px" width="75px"/>
                  </Col>
                </Row>
            </div>
          </div>
        </Col>
      </Row>
    </Container>

任何帮助将不胜感激。 :)

https://codesandbox.io/s/little-field-xtr48?from-embed

【问题讨论】：

这能回答你的问题吗？ Removing white space bootstrap
我发现之前没有任何效果。 ://
创建沙盒 (codesandbox.io)
我在编辑中添加了沙盒链接。你能正确看到链接吗？第一次用。

标签： html css bootstrap-4 react-bootstrap

【解决方案1】：

添加pr-0 类以删除图像右侧的空白。 pr-0- 将 padding-right 值设置为 0

参考：bootstrap spacing

<Col className="logo-col pr-0">
<img src={aviva} alt="aviva" className="brand-logo" height="75px" width="75px" />
</Col>

【讨论】：

【解决方案2】：

这是因为如果您将图像嵌套在两个col 中，那么这两个列将父行除以宽度的一半，而第一个列将占据整个宽度的一半。因此，删除正确空间的最佳方法是将这两个图像嵌套在同一个 col 本身中，如下所示。

<Container>
      <Row>
        <Col>
          <div className="form-border">
            <div className="form-box">
              <h1 className="form-title">Compare Cheap Life Insurance</h1>
              <Row className="logo-border">
                <Col className="logo-col">
                  <img
                    src={aviva}
                    alt="aviva"
                    className="brand-logo"
                    height="75px"
                    width="75px"
                  />
                  <img
                    src={aig}
                    alt="aig"
                    className="brand-logo"
                    height="75px"
                    width="75px"
                  />
                </Col>
              </Row>
            </div>
          </div>
        </Col>
      </Row>
    </Container>

【讨论】：