67

ナビゲーションバーの上部にロゴ画像を配置する方法を誰かが提案できますか？私のマークアップ：

  <body>
    <a href="index.html"> <img src="images/57x57x300.jpg"></a>
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">

57x57x300.jpgがナビゲーションバーの下に表示されているため、機能していません。

4

5 に答える 5

72

また、「navbar-brand」クラスを画像コンテナに追加する必要があります。また、次のように、コンテナa内に含める必要があります。.navbar-inner

 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
        <a class="navbar-brand" href="index.html"> <img src="images/57x57x300.jpg"></a>
     </div>
   </div>
 </div>
于 2012-03-27T16:50:35.443 に答える
55

以下のように、bootstrap.cssまたは新しいCSSファイルのいずれかでブランドクラスを上書きします-

.brand
{
  background: url(images/logo.png) no-repeat left center;
  height: 20px;
  width: 100px;
}

HTMLは次のようになります-

<div class="container-fluid">
  <a class="brand" href="index.html"></a>
</div>
于 2012-03-29T08:50:50.000 に答える
13

クラスを削除する必要navbar-fixed-topがあります。そうしないと、ロゴが必要なページの上部にナビゲーションバーが固定されたままになります。

ナビゲーションバー内にロゴを配置する場合：

ナビゲーションバーの高さ（@navbarHeightLESS変数で設定）は40pxデフォルトです。ロゴを内側に収めるか、ナビゲーションバーを最初に高くする必要があります。

次に、brandクラスを使用します。

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a href="/" class="brand"><img alt="" src="/logo.gif" /></a>
    </div>
  </div>
</div>

ロゴがより高い場合は20px、スタイルシートも修正する必要があります。

LESSでそれを行う場合：

.navbar .brand {
  @elementHeight: 32px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
}

@elementHeight画像の高さに設定する必要があります。

パディングの計算は、TwitterBootstrapLESSから取得されます-https ://github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52

または、パディング値を自分で計算して、純粋なCSSを使用することもできます。

これはTwitterBootstrapバージョン2.0.xで機能し、2.1でも機能するはずですが、パディングの計算が少し変更されました：https ://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50

于 2012-09-10T22:04:40.220 に答える
4

ブートストラップ3.2.0のナビゲーションバーにこのコードを使用します。画像の高さは最大50ピクセルである必要があります。そうしないと、標準のbsナビゲーションバーがブリードします。

画像にパディングが導入されるため、意図的にclass='navbar-brand'を使用しないことに注意してください。

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="" href="/"><img src='img/anyWidthx50.png'/></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
       <ul class="nav navbar-nav">
        <li class="active"><a href="#">Active Link</a></li>
        <li><a href="#">More Links</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</div>
于 2014-09-24T18:59:31.600 に答える
3

ナビゲーションバーの高さを上げない場合。

 .navbar .brand {
 position: fixed;    
 overflow: visible;
 padding-left: 0;    
 padding-top: 0;
 }

http://jsfiddle.net/petrfox/S84wP/を参照してください

于 2013-05-28T07:30:23.940 に答える