Bootstrap自定义CSS不生效及导航栏元素位置调整问题咨询

不使用自定义margin的话，推荐利用Bootstrap内置的flex布局和间距类，更符合框架规范，以下是几种可行方法：

方法1：重构导航栏结构，利用Bootstrap flex容器 #

将logo和地址元素放在同一个flex容器中，用Bootstrap间距类控制位置：

<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid d-flex align-items-center">
    <!-- Logo容器 -->
    <div class="logo-container">
      <a href="#" class="navbar-brand">
        <img class="img_logo" src="amazon_logo.png" alt="logo_img" height="40" width="110">
      </a>
    </div>
    <!-- 地址元素，用ms-3设置左侧间距 -->
    <div class="nav-location ms-3">
      <span id="nav-location-line1">Hello</span>
      <span id="nav-location-line2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
          <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
          <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
        </svg> Select Your Address
      </span>
    </div>
  </div>
</nav>

• container-fluid：让导航栏占满宽度
• d-flex：将容器设置为flex布局
• align-items-center：垂直居中元素
• ms-3：给地址元素设置左侧间距，替代自定义margin

方法2：移除多余的me-auto类 #

原代码中地址元素所在的ul和外层div都加了me-auto，这个类会设置margin-right: auto，将元素推到右侧。移除这些多余的me-auto，元素会自动左移：

<!-- 移除外层div的me-auto -->
<div class="navbar-nav mb-2 mb-lg-0">
  <!-- 移除ul的me-auto -->
  <ul class="navbar-nav mb-2 mb-lg-0 container-fluid">
    <li class="nav-item" id="loc-link">
      <!-- 地址内容 -->
    </li>
  </ul>
</div>

方法3：使用Bootstrap spacing类调整位置 #

给地址元素添加me-0（移除右侧margin）或ms-*类控制左侧间距，替代自定义的margin: 0 900px 0 0：

#loc-link {
  position: relative;
  margin-right: 0; /* 或直接在HTML加class="me-0" */
}

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