Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
87
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@FumiyaMizuguchi

BootstrapでNavbarにロゴ画像をいれるとズレる問題の解決法

Bootstrap使ってますか??エンジニアとってデザインがぐっと楽になるBootstrapは使ってる方も多いと思いますが、Navbarに画像を入れると下に偏った配置になるんだけど、、、
という声がどこからか聞こえてきたので、今回はその解決法を紹介します。

つかうもの

問題点

Bootstrapのnavbarのheaderに
<a class="navbar-brand" href="#">Brand</a>
こんな記述がされていると思うのですが、ここにロゴ画像を埋め込めばいいじゃん!
ということで
<a class="navbar-brand" href="#"><img src="logo.png"></a>
と記述しても上手くいきません。画像が下寄りに配置され、navbarからはみ出したりしてしまいます。

解決法

画像を放り込まないで、aタグの背景にせっていしてあげると上手くいきます!
<a class="navbar-brand" href="#"></a>
そして、cssで

.navbar-brand {
  background: url("logo.png") no-repeat left center;
  background-size: contain;
  height: 50px;
  width: 250px;
}

これで上手くいくはずです♪
お疲れさまでした^^

ブログやってます!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
87
Help us understand the problem. What is going on with this article?