BootStrap navbar-brand class中的徽標表現得很差

Question

我正在設計一個使用bootstrap css的響應式HTML頁面。我正在使用帶有徽標的navbar-brand類。該段代碼是：

<div class="grad"> 
     <a class="navbar-brand" id="navbar-logo" href="http://someUrl"><img src="images/someLogo.gif" height="43" alt="logo"></a> 
     <div> 
       <ul class="nav navbar-nav mycss-aligned"> 
       <li><span class="name">LastName, FirstName</span></li> 
       <li><span class="logo1">some</span><span class="logo2">Stuff</span></li> 
       </ul> 
     </div> 
</div> 

這mycss-aligned只是它下面列表中的幾個維度，而不是與我們的問題，所以我不分享。從引導文件中，相關CSS已經被我略作修改，以滿足我的需要，它是如下：

.navbar-brand { 
    float: left; 
    height: 60px; 
    padding: 10px 10px; 
    font-size: 18px; 
    line-height: 20px; 
} 

.navbar-brand>img { 
    -o-object-fit: contain; 
    object-fit: contain; 
    max-height: 100%; 
    height: 100%; 
    max-width: 100%; 
    width: auto; 
    margin: 0 auto; 
    margin-left:125%; 
    margin-top:-5%; 
} 

我有一個HTML div這是center aligned並具有總屏60% width。我試圖將分部的開始與標誌的開始相匹配。雖然我可以實現這一點，但您可以看到，我需要在.navbar-brand>img中使用margin-left值的異常高的百分比。這就是說，即使我能做到這一點，設計幾乎沒有反應，當頁面調整大小時，徽標不會與分部一起滑動。有趣的是

<div> 
      <ul class="nav navbar-nav mycss-aligned"> 
      <li><span class="name">LastName, FirstName</span></li> 
      <li><span class="logo1">some</span><span class="logo2">Stuff</span></li> 
      </ul> 
    </div 

是完全響應。我能做些什麼來解決這個問題？

Answer 1

首先，我建議您使用更多的引導組件來爲要使用的元素創建上下文。例如。有一個navbar-fixed-top類。

您可以see my fork of the code on jsfiddle在所有div上都有一個大綱來顯示對齊。

這裏是我會寫同一

<header> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-content"> 
       <a class="navbar-brand" id="navbar-logo" href="http://someUrl"> 
        <img src="images/someLogo.gif" height="43" alt="logo"> 
       </a> 

       <ul class="navbar-list"> 
        <li><span class="name">LastName, FirstName</span> 

        </li> 
        <li><span class="logo1">Some</span><span class="logo2">Stuff</span> 

        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</header> 
<main> 
    <div class="container"> 
     <div style="width: 60%; margin:0 auto; text-align:justify;"> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br>This is just some uberRandom text to show how the division is getting aligned and justified 
     </div> 
    </div> 
</main> 

和重新編寫CSS

.navbar { 
    background: linear-gradient(white, grey); 
    box-shadow: 0 0 10px #333; 
} 

.navbar-content { 
    width: 60%; 
    margin: 0 auto; 
    font-size: 13px; 
    line-height: 17px; 
} 

.navbar-list { 
    float: right; 
    margin-top: 5px; 
} 

.navbar-brand { 
    padding: 0; 
} 

.navbar-brand>img { 
    -o-object-fit: contain; 
    object-fit: contain; 
    max-height: 100%; 
    height: 100%; 
    max-width: 100%; 
    padding-top: 10px; 
    margin: 0 auto; 
} 

你注意到的是，被設置爲相同的寬度導航欄的內部內容實際內容（該段落）。這樣你就不必使用那些愚蠢的邊距，圖像和文本應該對齊。