Twitter-Bootstrap-2-Logo Bild oben auf Navbar

Kann jemand empfehlen, wie ich ein logo-Bild auf der Oberseite der navbar?
Mein markup:

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

Es nicht so funktioniert, wie die 57x57x300.jpg gezeigt wird unterhalb der Navigationsleiste.

InformationsquelleAutor der Frage Gattoo | 2012-03-27

  1. 71

    Müssen Sie auch hinzufügen, die "navbar-brand" - Klasse, um Ihr Bild a container, auch Sie müssen es innerhalb der .navbar-inner container, etwa so:

     <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>

    InformationsquelleAutor der Antwort Andres Ilich

  2. 55

    Überschreiben die Marke Klasse, entweder in der bootstrap.css oder eine neue CSS-Datei, wie unten -

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

    und Ihre html Aussehen sollte -

    <div class="container-fluid">
  <a class="brand" href="index.html"></a>
</div>

    InformationsquelleAutor der Antwort Simon Cunningham

  3. 13

    Sollten Sie entfernen navbar-fixed-top Klasse sonst navbar bleibt fixiert auf top-Seite, wo Sie wollen logo.

    Wenn Sie möchten-logo in navbar:

    Navbar Höhe (festgelegt in @navbarHeight WENIGER variable) ist 40px standardmäßig. Ihr logo muss passen innerhalb oder Sie haben, um navbar höher ersten.

    Dann verwenden brand Klasse:

    <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>

    Wenn Ihr logo ist höher als 20px Sie haben zu beheben stylesheets als gut.

    Wenn Sie tun in WENIGER:

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

    @elementHeight sollte festgelegt werden, Ihre Höhe des Bildes.

    Polsterung Berechnung ist entnommen aus Twitter Bootstrap LESS - https://github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52

    Alternativ können Sie berechnen, Polsterung Werte selbst und verwenden Sie Reine CSS-Dateien.

    Dies funktioniert für Twitter Bootstrap, Version 2.0.x, sollte die Arbeit in 2.1 als gut, aber Polsterung Berechnung wurde ein wenig verändert: https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50

    InformationsquelleAutor der Antwort jana4u

  4. 4

    ich benutze diesen code für die Navigationsleiste auf bootstrap 3.2.0,
    das Bild sollte bei den meisten 50px hoch ist, sonst wird es Bluten die standard bs navbar.

    Bemerken, dass ich absichtlich nicht verwenden, die class='navbar-brand" als das führt Polsterung auf dem Bild

    <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>

    InformationsquelleAutor der Antwort Greg

  5. 3

    Wenn du nicht erhöhen die Höhe der navbar..

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

    sehen http://jsfiddle.net/petrfox/S84wP/

    InformationsquelleAutor der Antwort Fox

Schreibe einen Kommentar