如何在图标之间添加间距但它们与简约代码保持在同一行而不添加styles.js或类似的东西答案

【问题标题】：How to add Spacing in between icons but they remain in the same row with minimalistic code with out adding styles.js or anything like that如何在图标之间添加间距但它们与简约代码保持在同一行而不添加styles.js或类似的东西
【发布时间】：2021-09-09 09:22:47
【问题描述】：

如何在图标之间添加填充，但它们与简约代码保持在同一行，而不添加 style.js 或类似的东西

<Card.Body>
       <a href={item.facebookPage}><Button  > <i class="fab fa-facebook-square fa-3x "></i></Button></a>
       <a href={item.instagram}><Button variant='warning'> <i  class="fab fa-instagram fa-3x" ></i></Button></a>
       <a href={item.twitter}><Button variant='primary' > <i  class="fab fa-twitter fa-3x" ></i></Button></a>
       <a href={item.youtube}><Button variant='danger' > <i  class="fab fa-youtube fa-3x" ></i></Button></a>
        <a href={item.linkedIn}><Button variant='light' > <i  class="fab fa-linkedin-in fa-3x" ></i></Button></a>
  </Card.Body>

目前它们看起来像这样

【问题讨论】：

标签： html css reactjs react-bootstrap

【解决方案1】：

嘿，你不知道你想要边距或填充，我的意思是想要在图标和边框之间或直接在图标之间留出空间，但我会告诉你。

如果你想用一些空间分隔图标，你可以在你的 css 文件中使用它或在你的 html 中使用样式标签

Card.Body a{
   display:inline-block;
   margin-right:1em;
}

如果你想为你的图标添加内边距，你可以使用

Card.Body a{
   display:inline-block;
   padding:0.5em;
}

或

Card.Body a{
   display:inline-block;
   padding-left:0.5em;
   padding-right:0.5em;
}

但要小心填充。在某些情况下，它可能会导致图标变小。希望有效。

【讨论】：

感谢您的回答
但是我从bootstrap docs 找到了另一个解决方案，我发布了答案，您可以查看一下。
没错，它会像我们一样在图标的两侧留出边距。使用此引导功能更为实用和最佳实践。

【解决方案2】：

要获得在项之间的间距，但不影响前后的间距，您可以使用 CSS first 和 last-child 伪类。

这个 sn-p 通过给中间元素左右各 1em 的边距来在元素之间放置 2em 间距，并且第一个元素只有一个右边距，最后一个元素只有一个左边距：

cardbody a {
  margin-left: 1em;
  margin-right: 1em;
}
cardbody a:first-of-type {
  margin-right: 1em;
}
cardbody a:last-of-type {
  margin-left: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<cardbody>
       <a href={item.facebookPage}><Button  > <i class="fab fa-facebook-square fa-3x "></i></Button></a>
       <a href={item.instagram}><Button variant='warning'> <i  class="fab fa-instagram fa-3x" ></i></Button></a>
       <a href={item.twitter}><Button variant='primary' > <i  class="fab fa-twitter fa-3x" ></i></Button></a>
       <a href={item.youtube}><Button variant='danger' > <i  class="fab fa-youtube fa-3x" ></i></Button></a>
        <a href={item.linkedIn}><Button variant='light' > <i  class="fab fa-linkedin-in fa-3x" ></i></Button></a>
</cardbody>

注意：我无法让 Card.Body 格式在有或没有 react 的情况下作为标签工作，因此出于本演示的目的将其简化为 cardbody。

【讨论】：

感谢您的回答，但我找到了另一种方式并以非常简单的方式发布了答案

【解决方案3】：

上面的答案很好，但我想用简约的代码来实现它因此，通过在按钮内添加className='mx-2'，就可以完成这项工作。

  <Card.Body>
     <a href={item.facebookPage}><Button className='mx-2' > <i class="fab fa-facebook-square fa-3x "></i></Button></a>
     <a href={item.instagram}><Button variant='warning' className='mx-2'> <i  class="fab fa-instagram fa-3x" ></i></Button></a>
     <a href={item.twitter}><Button variant='primary' className='mx-2'> <i  class="fab fa-twitter fa-3x" ></i></Button></a>
     <a href={item.youtube}><Button variant='danger' className='mx-2'> <i  class="fab fa-youtube fa-3x" ></i></Button></a>
     <a href={item.linkedIn}><Button variant='light' className='mx-2'> <i  class="fab fa-linkedin-in fa-3x" ></i></Button></a>
       </Card.Body  >

现在他们看起来像

【讨论】：