トップナビバーのnavbar-brandの中にロゴを追加したいと思います。ビューポートサイズに合わせて拡大・縮小させたいので、img-responsive2クラスを使用しています。
navbar-brand内の画像とテキストの両方が次の行に折り返されているように見えます。
このページはhttp://digitalponddesign.com/dev/で見ることができます。
ご協力ありがとうございました。
以下は私のコードです。
Html
<h2 class="navbar-brand brand-name">
<a href="index.html"><img class="img-responsive2"
src="images/DigitalPondlogo.png">DigitalPond</a>
</h2>
CSS
.navbar {
margin: 10px 0;
}
.navbar-default {
background-color: #fff;
border-color: #fff;
}
.brand-name {
font-family: 'Josefin Slab', serif;
font-size: 47px;
font-weight: bold;
color: #444;
text-decoration: none;
}
.nav-container {
padding-top: 8px;
}
.navbar-custom {
font-size: 20px;
background-color: #FFF;
}
他のスレッドで、うまくいく解決策を見つけました。pull-leftクラスを使用します。
<a href="#" class="pull-left"><img src="/path/to/image.png"></a>
このスレッドのMichaelに感謝します。
[https://stackoverflow.com/questions/28358483/bootstrap-how-to-add-a-logo-to-navbar-class][1]
[1]: https://stackoverflow.com/questions/28358483/bootstrap-how-to-add-a-logo-to-navbar-class