如何在Bootstrap中将logo、电话、地址放在导航栏上方并实现对齐

现有代码核心问题 #

• 网格列宽度超标：Bootstrap默认单行总列数为12，你的代码第一行写了col-md-3+col-md-6+col-md-6合计15列，直接导致布局偏移
• 顶部元素无对齐规则：所有logo、地址、电话相关元素混排在同一个列容器里，没有设置垂直对齐、水平间距规则，导致错位
• 导航栏外层冗余结构：导航栏外层套了多余的row容器，容易引发横向滚动条问题

修复后完整代码 #

<header>
  <div class="container py-3">
    <!-- 顶部信息区整体居中，元素垂直对齐 -->
    <div class="d-flex flex-wrap align-items-center justify-content-center gap-4">
      <!-- Logo模块 -->
      <div class="logo-wrapper">
        <img class="img-fluid" style="max-width: 180px;" src="images/logo.png" alt="logo">
      </div>
      <!-- 地址模块：图标+文本垂直对齐 -->
      <div class="address-wrapper d-flex align-items-center gap-2">
        <img class="img-fluid" style="width: 20px;" src="images/header-address.png" alt="地址图标">
        <span class="span-text">1234 Abcd Efg  <br> HI jk Lm,123466</span>
      </div>
      <!-- 电话模块：图标+文本垂直对齐 -->
      <div class="phone-wrapper d-flex align-items-center gap-2">
        <img class="img-fluid" style="width: 20px;" src="images/header-phone.png" alt="电话图标">
        <span class="span_text">(123) 456 7890 <br> Call Us</span>
      </div>
    </div>
  </div>  
</header>

<section>
  <div class="container px-0">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">    
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">HOME</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">ABOUT</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">GALLERY</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">CONTACT US</a>
            </li>     
          </ul>
        </div>
      </div>
    </nav>
  </div>
</section>

改动说明 #

• 替换了原来错误的12列网格布局，用Bootstrap原生flex工具类实现顶部内容整体居中，元素自动排列，小屏会自动换行适配
• 把地址、电话分别做成独立模块，图标和文本默认垂直居中对齐，自动设置间距
• 移除了导航栏外层冗余的row容器，避免布局异常
• 调整了图片的尺寸设置，避免图标过大或过小，你可以根据实际需求调整max-width的数值适配你的logo尺寸

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