我正在嘗試制作一個簡單的導航欄，并且我希望將“主頁”和“聯系人”等導航欄的內容向右移動一點，以便它也適用于移動用戶。這就是我的導航欄的樣子，我畫的紅線代表我希望“測驗”開始的位置。
我不知道如何將“Test Home Contact Us”移到那條紅線的開頭。我嘗試將style="left:200px"每個文本<a>...</a>部分放入其中，但沒有奏效。我正在使用引導程式導航欄，所以我基本上只是從引導程式復制并粘貼導航欄，這是它的代碼：
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('home_page') }}"><b>Test</b></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home_page') }}"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="market">Contact Us</a>
</li>
</ul>
</div>
</nav>
uj5u.com熱心網友回復：
您可能正在尋找style="padding-left: 200px;"而不是left.
uj5u.com熱心網友回復：
簡單地container在<nav>標簽旁邊添加一個div會有所幫助。
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{{ url_for('home_page') }}"><b>Test</b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home_page') }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="market">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
來源：https : //getbootstrap.com/docs/4.6/layout/overview/#containers
uj5u.com熱心網友回復：
你必須給padding-left整個nav標簽。例如：
nav {
padding-left: 200px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390326.html
標籤：html css bootstrap-4 导航栏
上一篇：Mysql客戶端的安裝
下一篇：ERROR 1396 (HY000): Operation ALTER USER failed for 'root'@'localhost'