将图像放在导航栏 bootstrap 和 css 下方，但不与文本重叠

Question

我只是想直接在导航栏下放置一张图片。我不希望导航栏文本以任何方式与图像重叠。

无论我在代码中做什么，图像都会锁定在导航栏的末尾。它不会进入导航栏下方的单独行。

我试过把它放在它自己的 div 部分，p，ul，li，但没有任何效果。

有没有办法在不使用 break 标签的情况下在另一个容器中调整图像。

    <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-toggle-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>
<br>
<br>
<br>
<br>

<body>
    <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>

Answer 1

我认为您必须为导航栏使用固定位置而不是固定位置

Answer 2

fixed-top使得nav变成了position: fixed，所以垂直高度无法填充。如果添加任何其他标签，这些标签将堆叠到 nav.

为了克服这种情况，使用 nav 高度的近似计算 padding-top 说 50px。因此，将此值应用于您案例中的其他标签 <body style='padding-top:50px'>

否则我们可以使用 sticky-top，但它还不兼容所有浏览器

将图像放在导航栏 bootstrap 和 css 下方，但不与文本重叠

Putting an image below the nav bar bootstrap and css WITHOUT it being overlapped by text

html

css

image

placement

bootstrap-4