Bagaimana untuk menyelaraskan teks navbar bootstrap dengan imej?
P粉221046425
P粉221046425 2024-03-28 14:13:44
0
2
411

Saya menggunakan navbar bootstrap dan saya menyisipkan imej pada penjenamaan navbar tetapi disebabkan saiznya ia mengacaukan penjajaran. Saya mahu teks yang disertakan dengannya diselaraskan dengan bahagian tengahnya, tetapi saya tidak tahu bagaimana untuk mendapatkan teks butang lain untuk diselaraskan dengannya juga.

Beginilah rupa outputnya

<a class ="navbar-brand" id="home" href="/">
                    <img src="https://cdn.discordapp.com/attachments/901496285759168554/1045812932535128084/jeffersonlogo.webp" width="40" height="60" class="d-inline-block align-middle" alt="">
                      Jefferson Robotics</a>
                <a class="nav-item nav-link" id="water" href="/underwater">Underwater</a>
                <a class="nav-item nav-link" id="sky" href="/aerial">Aerial</a>
                <a class="nav-item nav-link" id="earth" href="/land">Land</a>

Saya cuba menggunakan penjajaran pada item navigasi tetapi tidak kira apa yang saya lakukan ia tidak mengubah apa-apa, ini kali pertama saya menggunakan bootstrap dan pengetahuan html saya terhad jadi saya langsung tidak tahu apa yang perlu dilakukan: (< /p>

P粉221046425
P粉221046425

membalas semua(2)
P粉797004644

Tidak pasti apa yang salah dengan pelaksanaan anda. Saya cuba membungkus coretan anda dengan bekas navigasi seperti yang dinyatakan dalam dokumentasi bootstrap dan ia kelihatan bagus:

a.nav-item {
  color: white;
}

a.nav-item:hover {
  color: yellow;
}
sssccc
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

Mungkin anda hanya kehilangan pembalut itu? Atau mungkin anda tidak memasukkan gaya bootstrap dalam gaya statik fail HTML anda?

P粉129275658

Anda boleh mencuba semua <a> 标记以及 navbar-brand <a> 标记上使用引导程序中的 d-flexalign-items-center ​​kelas pada elemen induk seperti yang ditunjukkan di bawah. Ini akan memusatkan elemen secara menegak.

[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan