Bootstrap - 在頂部標題處放置徽標

Question

我如何設置這樣的徽標？ （第二個）

我已經嘗試，但沒有工作。我的代碼

<!-- Navigation --> 
    <nav class="navbar navbar-inverse 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="#bs-example-navbar-collapse-1"> 
        <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="brand navbar-brand" href="#"><img src="img/logo.png" alt=""></a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="#/property/list/1">Buy</a> 
        </li> 
        <li> 
         <a href="#/property/list/2">Rent</a> 
        </li> 
        <li> 
         <a href="#/property/list/3">New Properties</a> 
        </li> 
        <li> 
         <a href="#/property/alert">Property Alert</a> 
        </li> 
        <li> 
         <a href="#/resource">E-Learning</a> 
        </li> 
        <li> 
         <a href="#/about">About Us</a> 
        </li> 
        <li> 
         <a href="#/contact">Contact Us</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 

請諮詢和聖誕快樂:)

Answer 1

你可以只從導航欄完全刪除的品牌，然後添加與IMG的屬性，導航欄這將是您的標誌，上面一個div

Answer 2

創建兩個導航欄並使第二個導航欄的頂部位置從第一個導航欄下面開始。

<nav class="navbar navbar-inverse navbar-fixed-top my-logo" role="navigation"> 
    ..... 
</nav> 
<nav class="navbar navbar-inverse navbar-fixed-top my-menu" role="navigation">  

現在您可以創建第二導航欄樣式

.my-menu { 
    top: 50px; 
} 

Answer 3

DEMO：https://jsbin.com/holumi/1/

https://jsbin.com/holumi/1/edit?html,css,output

---

徽標的大小很重要，請調整最小寬度媒體查詢以將徽標移動到位。

在navbar上加上navbar-custom。

取出brand和navbar-brand，並添加logo

調整其他CSS需要。最小寬度媒體查詢前的CSS適用於所有視口大小，INSERT最小寬度媒體查詢的內容適用於該最小寬度和最大寬度。

使用position:absolute會將徽標以最小寬度放在文檔流之外，因此使用填充將navbar-nav放置到位。注意值。

本示例中的小視口CSS對於大型和小型使用相同的徽標，如果徽標變暗，則可以使用響應式實用程序類隱藏一個並以最小寬度或最大寬度顯示另一個徽標，寬度，例如visible-xs上的徽標將在深色背景上，並且hidden-xs上的徽標適用於所有其他尺寸。

CSS

.navbar-custom { 
    background: navy 
} 

.navbar-custom .logo img { 
    padding: 15px; 
    max-width: 100%; 
    height: auto; 
} 

.navbar-custom .logo { 
    float: left; 
    padding-right: 40px; 
    width: 100%; 
} 

.navbar-custom .navbar-toggle { 
    position: absolute; 
    right: 15px; 
    top: 15px; 
    border: 0px; 
    width: 50px; 
    margin: 0; 
} 

.navbar-custom .icon-bar { 
    width: 100%; 
    margin: 5px 0; 
    height: 3px; 
} 

@media (min-width:768px) { 
    .navbar-custom.navbar { 
     height: 200px 
    } 

    .navbar-custom .container { 
     position: relative; 
     overflow: visible; 
    } 

    .navbar-custom .navbar-nav { 
     padding: 125px 0 0; 
     text-align: center; 
     width: 100%; 
    } 

    .navbar-custom .navbar-nav > li { 
     display: inline-block; 
     float: none; 
    } 

    .navbar-custom .logo { 
     position: absolute; 
     background: #fff; 
     left: 0; 
     right: 0; 
     z-index: 5000; 
     display: block; 
     float: none; 
     padding: 0; 
    } 

    .navbar-custom .logo:before, 
    .navbar-custom .logo:after { 
     position: absolute; 
     background: #fff; 
     content: ''; 
     left: -2000px; 
     width: 2000px; 
     bottom: 0; 
     display: block; 
     height: 100%; 
    } 

    .navbar-custom .logo:after { 
     left: auto; 
     right: -2000px; 
    } 
} 

HTML

<!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-fixed-top navbar-custom" 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="#bs-example-navbar-collapse-1"> 
        <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="logo" href="#"><img src="http://placehold.it/100x75/000/FFFFFF&text=LOGO" alt=""></a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li> 
         <a href="#/property/list/1">Buy</a> 
        </li> 
        <li> 
         <a href="#/property/list/2">Rent</a> 
        </li> 
        <li> 
         <a href="#/property/list/3">New Properties</a> 
        </li> 
        <li> 
         <a href="#/property/alert">Property Alert</a> 
        </li> 
        <li> 
         <a href="#/resource">E-Learning</a> 
        </li> 
        <li> 
         <a href="#/about">About Us</a> 
        </li> 
        <li> 
         <a href="#/contact">Contact Us</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav>