Bootstrap 5页面元素位置调整求助：图标、文本及图片定位

一、顶部导航元素（谷歌图标+导航文本）右移 #

• 利用Bootstrap内置flex类快速实现整体右移：给导航栏的容器添加justify-content-end类，让导航内容整体靠右，示例代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid justify-content-end">
    <a class="navbar-brand" href="#"><img src="google-icon.png" alt="Google"></a>
    <div class="navbar-nav">
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link" href="#">About</a>
    </div>
  </div>
</nav>

• 若需精细像素级微调，给导航元素加自定义CSS：

.navbar-brand, .nav-link {
  margin-left: 10px; /* 根据需求调整像素值 */
}

二、"I am dreaming..." 文本右移+上移 #

• 右移+上移结合Bootstrap间距类快速实现：给文本标签添加ms-3 mt-n2类，ms-3实现左margin（即文本右移），mt-n2实现负上margin（即文本上移），示例：

<p class="ms-3 mt-n2">I am dreaming...</p>

• 若需更灵活的自定义，写专属CSS类：

.dream-text {
  margin-left: 20px; /* 右移像素 */
  margin-top: -15px; /* 上移像素，负值实现向上调整 */
}

对应文本标签：

<p class="dream-text">I am dreaming...</p>

三、页面谷歌图片右移 #

• 用Bootstrap间距类快速调整：给图片添加ms-4类（左margin4个Bootstrap单位），示例：

<img src="google-image.png" alt="Google" class="ms-4">

• 自定义像素微调的话，添加专属CSS：

.google-image {
  margin-left: 30px; /* 按需调整像素值 */
}

对应图片标签：

<img src="google-image.png" alt="Google" class="google-image">

提示：如果元素在Bootstrap网格（row/col）中，优先使用网格的justify-content-end（水平右对齐）、align-self-start（垂直上移）等类，更贴合框架布局规范。

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