360x640移动端站点Bootstrap卡片边距、Font Awesome图标问题求助

问题修复方案 #

1. 右侧空白与25年经验位置异常修复

当前卡片使用了flex布局但未给右侧内容区设置宽度占比，导致无法填充剩余空间，给.card-block添加flex: 1; min-width: 0;属性即可自动填充右侧空白。experience类的float属性本身生效，只要右侧内容区宽度足够就会自动靠最右侧显示。

2. 图标与文本对齐修复

给所有<i>标签添加vertical-align: middle; margin-right: 6px;属性，即可实现图标与文本中线对齐，同时保留合适的间距。

3. fa-phone-alt图标不显示修复

你当前引入的Font Awesome 5.5.0版本不包含fa-phone-alt图标，该图标在5.10.0版本才新增，将FA的CDN链接替换为5.15.4版本即可正常使用，也可以直接用现有版本支持的fa-phone图标。 #

完整修改后代码 #

CSS代码

body {
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 20px;
  /* 原30px字体过大，适配360px宽度移动端调整为16px */
  font-size: 16px;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(241, 241, 241);
  color: orangered;
  text-align: center;
  font-size: 14px;
}

.experience {
  float: right;
  color: #f78336;
  font-weight: bold;
}

.orange {
  background-color: #f78336;
  font-size: 16px;
  color: white;
}

i {
  color: #f78336;
  /* 新增对齐和间距属性 */
  vertical-align: middle;
  margin-right: 6px;
}

.call-btn {
  background-color: #f78336;
  padding: 10px 20px;
  /* 去掉多余左边距 */
  margin-left: 0;
  width: auto;
  box-shadow: 2px 4px #c8c8c8;
}

/* 新增卡片内容区占比设置 */
.card-block {
  flex: 1;
  min-width: 0;
  padding: 1rem 0;
}

/* 去掉卡片flex-wrap避免换行 */
.card.flex-row {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.card-header img {
  border-radius: 8px;
}

HTML代码

<!doctype html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <!-- 升级Font Awesome版本支持fa-phone-alt -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  <title>Talk to an Astrologer</title>
</head>
<body>
<!-- Search bar-->
<div class ="search-bar sticky-top" >
<ul class="navbar navbar-light bg-light justify-content-end">
    <a class="navbar-brand" href="#">
      <img src="../assets/search.png" width="30" height="30" alt="">
    </a>
    <a class="navbar-brand" href="#">
        <img src="../assets/filter.png" width="30" height="30" alt="">
      </a>
      <a class="navbar-brand" href="#">
        <img src="../assets/sort.png" width="30" height="30" alt="">
      </a>
</ul>
</div>
<!--- MAIN SECTION   -->
<div class="main mb-3">
<h1><b>Talk to an Astrologer</b></h1>
<div class="card flex-row mb-3 mx-3">
    <div class="card-header border-0">
        <img src="//placehold.it/120" width="120" height ="120" alt="">
    </div>
    <div class="card-block mx-2">
        <span class ="experience">25 years</span> 
        <h2 class="card-title" style="font-size: 20px;"><b>Arvind Shukla</b></h2>
      
        <p class="card-text"><i class="fas fa-user"></i>Cofee Cup Reading ,<br>Falit Jyotish,Kundali Grah Dosh,<br>Vastu,Astrology,Vedic Astrology,<br>Palmistry,Numerology,Face<br> Reading,Tarot</p>
        <p class="card-text"><i class="fas fa-om"></i>English,Hindi</p>
        <p class="card-text"><i class="fas fa-money-bill-wave"></i><b>₹100/Min</b></p>
        <a href="#" class="btn orange call-btn"> <i class="fas fa-phone-alt" style="color:white"></i>Talk on Call</a>
       
    </div>
</div>
</div>
</body>
</html>

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