在 css 中用 % 改变我的宽度，改变 bootstrap flex答案

【问题标题】：Changing my width with % in css changing bootstrap flex在 css 中用 % 改变我的宽度，改变 bootstrap flex
【发布时间】：2020-12-01 18:11:35
【问题描述】：

我遇到了一个奇怪的问题。我在我的 div 容器中添加了一个

d-flex justify-content-between 容器

带有一侧文字和其他图像。但是当我用 % 例如 (width:5%) 更改宽度时，flex 会变得很奇怪，一切都将结束。

有些点：当我用 vh vw 或 px 改变宽度时，它可以工作，但我需要 %.我该怎么办？

JSX：

<section className='footer-area'>
        <div className='d-flex justify-content-between container'>
          <div className='address'>
            <h4>Home@re-friendly.com</h4>
            <h4>ארלוזרוב 11, רמת גן</h4>
          </div>
          <div className='mw-3 share '>
            <img
              src={facebookLogo}
              className='img-fluid'
              alt='Responsive image'
              onClick={() =>
                window.open(
                  "https://www.facebook.com/"
                )
              }
            />
            <img
              src={whatsappLogo}
              className='img-fluid'
              alt='Responsive image'
              onClick={() => window.open("https://wa.me/+972505710373")}
            />
          </div>
        </div>
      </section>

CSS：

.img-fluid {
  margin: 2vh;
  max-width: 10%;
  height: auto;
}

奇怪的页脚

应该如何：（用 vh 做了，但我需要用 %）

【问题讨论】：

如果您可以提供一个有效的 sn-p 来演示您的问题，则更容易发现问题。您可以尝试使用flex: 0 0 5% 而不是width: 5%

标签： javascript html css reactjs bootstrap-4

【解决方案1】：

对于flex 子flex 属性而不是宽度。

所以要在你的css属性中使用5%宽度来实现flex: 0 0 5%;

【讨论】：

不明白你的答案...我需要把它放在父元素或子元素上（都尝试过但没有成功。）
我的答案设置了 flex 元素子元素的宽度。使用引导程序d-flex justify-content-between，您应该能够达到预期的结果。你能分享这些类的CSS吗？ address mw-3 share 可能有助于追踪问题

【解决方案2】：

  .img-fluid {
    margin: 2vh;
    max-width: 10%;
    height: auto;
    float: left;
     }

【讨论】：