如何用Bootstrap和CSS实现图片置于导航栏下方且不被文字重叠

问题根源 #

你的导航栏使用了Bootstrap的fixed-top类，该类会将导航栏设置为固定定位，脱离正常文档流，页面其余内容会默认从视口顶部开始渲染，自然会被固定在顶部的导航栏遮挡，和你用什么容器包裹图片没有关联。
另外你现有代码存在结构错误：<nav>标签放在了<body>标签外部，所有页面可见内容必须放在<body>标签内部，否则也可能引发布局异常。

无需br标签的解决方案 #

方案1：保留导航栏固定在顶部的效果 #

这是Bootstrap官方推荐的处理方案，给body设置等于导航栏高度的上内边距即可：

body {
  /* 可根据你实际导航栏高度调整数值，默认Bootstrap导航栏高度为56px */
  padding-top: 56px;
}

如果导航栏在小屏幕折叠后高度会变化，可搭配媒体查询动态调整padding值：

/* 示例：屏幕宽度小于768px时导航栏折叠后高度为80px */
@media (max-width: 767.98px) {
  body {
    padding-top: 80px;
  }
}

方案2：不需要导航栏固定在顶部 #

直接删除<nav>标签上的fixed-top类即可，导航栏会回到正常文档流，后续内容自然排列在导航栏下方，无需额外加任何样式。

修正后的代码结构示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 此处引入Bootstrap相关CSS -->
  <style>
    body {
      padding-top: 56px;
    }
  </style>
</head>
<body>
  <nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md fixed-top">
    <a href="#" class="navbar-brand">TEXT</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navLinks">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">Projects</a>
        </li>
        <li class="nav-item">
          <a href="" class="nav-link">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <section>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-5">
          <img class="img-thumbnail rounded-circle" src="/Users/admin/Pictures/img.jpg" alt="img">
        </div>
      </div>
    </div>
  </section>

  <!-- 此处引入jQuery、Popper、Bootstrap相关JS -->
</body>
</html>

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