如何在Bootstrap導航欄中添加多個徽標？

我想將兩個徽標添加到自舉導航欄中，但我也希望它們能夠響應（即，我希望它們變小，而不是在縮小屏幕尺寸時進行疊加）。這裏是我一直在努力的導航欄代碼 -如何在Bootstrap導航欄中添加多個徽標？

<nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> 
        <img alt="Brand" id="brand1" src="img/image.png"> 
       </a> 

       <a class="navbar-brand" href="#"> 
        <img alt="Brand" id="brand2" src="img/image2.png"> 
       </a> 

      </div> 
     </div> 
    </nav>

任何幫助將不勝感激！

來源

2016-09-06 unohuzdis

您如何確切地需要，讓代碼筆或小提琴的例子更好地理解。 –

我已經創建有兩個並列的標誌面的例子。

請查閱工作實例CODEPEN

HTML：

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="nav-header"> 
     <div class="row"> 
     <div class="col-sm-4"> 
      <div class="row"> 
      <div class="col-xs-6"> 
       <a class="navbar-brand" href="#"> 
       <img alt="Brand" id="brand2" src="http://www.kratosuk.com/wp-content/uploads/2013/07/joomla-logo.png" class="img img-responsive"> 
       </a> 
      </div> 
      <div class="col-xs-6"> 

       <a class="navbar-brand" href="#"> 
       <img alt="Brand" id="brand1" class="img img-responsive" src="http://www.kratosuk.com/wp-content/uploads/2013/07/drupal-logo.png"> 
       </a> 


      </div> 
      </div> 
     </div> 

     </div> 
    </div> 
</nav>

CSS：

.navbar-brand { 
    display: inline-block; 
    float: none; 
    font-size: 18px; 
    height: 100%; 
    padding: 0; 
    vertical-align: middle; 
}

我希望它能幫助你

享受:)

來源

2016-09-06 10:59:38

它的工作就像一個魅力！非常感謝:) – unohuzdis

您的歡迎:) –

還有一件事，你知道我怎麼能把它們放在中心？對不起我是新來的CSS :( – unohuzdis

'img-reponsive'類應該可以幫到你。

<img alt="Brand" id="brand1" src="img/image.png" class="img-responsive">

希望它可以幫助你:)

來源

2016-09-06 08:02:22

謝謝，但不幸的是它不工作。 :( – unohuzdis

如何在Bootstrap導航欄中添加多個徽標？

回答

相關問題