Bootstrap新手求助：如何实现图标在全屏幕尺寸下并排显示？

嘿，我来帮你搞定这两个小问题！

问题1：移动端图标上下堆叠而非并排 #

你现在用的col-sm-6只在≥576px的屏幕（sm断点及以上）生效，在小于576px的移动端（xs断点），列会自动占满100%宽度，所以两个div自然就上下叠起来了。要让它们在任意屏幕都保持并排，把列类改成col-6就好——这个类是针对所有屏幕尺寸的，每个div会始终占据50%宽度，不管屏幕多小都能并排显示。

问题2：自定义边距xs-my-20不生效 #

首先，Bootstrap本身没有xs-my-20这个内置类，得自己写对应的CSS样式。另外，Bootstrap的响应式命名里，xs是默认断点（不需要额外前缀），如果只想让这个边距在xs屏生效，可以用媒体查询定义：

/* 针对<576px屏幕的自定义边距 */
@media (max-width: 575.98px) {
  .xs-my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

要是想让边距在所有屏幕都生效，直接去掉媒体查询，写成.xs-my-20 { margin: 20px 0; }就行。

修改后的完整代码 #

<!-- 先确保引入Bootstrap和Font Awesome的CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
@media (max-width: 575.98px) {
  .xs-my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
</style>

<div class="row text-center">
  <div class="col-6 xs-my-20">
    <i class="fab fa-facebook-f icons"></i>
  </div>
  <div class="col-6 xs-my-20">
    <i class="fab fa-facebook-f icons"></i>
  </div>
</div>

额外小提示 #

• 既然用了col-6覆盖所有屏幕，原来的col-sm-6和col-md-6可以删掉，避免代码冗余。
• 要是想让图标间距更美观，直接用Bootstrap内置类就行，比如给每个col-6加px-2（左右内边距），或者给图标加mx-2（左右外边距），比自定义类更省心~

内容的提问来源于stack exchange，提问作者Anuj Mody