我只是想直接在導航欄下放置一個影像。我不希望導航欄文本以任何方式與影像重疊。
無論我在代碼中做什么，影像都會鎖定在導航欄的末尾。它不會進入導航欄下方的單獨行。
我試過把它放在自己的 div、section、p、ul、li 中，但沒有任何效果。
有沒有辦法在另一個容器中調整影像，而不使用中斷標簽。
<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>
uj5u.com熱心網友回復：
fixed-top使nav是position: fixed，所以垂直高度無法填充。如果添加任何其他標簽，這些標簽將堆疊到nav.
為了克服這種情況，使用padding-top近似計算nav高度說50px。因此，將此值應用于您的案例中的進一步標記<body style='padding-top:50px'>
或者我們可以使用sticky-top，但它尚未兼容所有瀏覽器
uj5u.com熱心網友回復：
我認為您必須為導航欄使用位置粘性而不是固定位置
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358844.html
標籤：html css 图片 bootstrap-4 放置
上一篇：CSS網格影像不能垂直縮放