BootStrap導航欄品牌類別中的徽標表現不佳

Question

我正在設計使用引導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僅是其下列表的幾個維度，與我們的問題無關，因此我不予分享。 我對BootStrap中的相關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 ，該div是center aligned ， 60% width整個屏幕的60% width為60% width 。 我正在嘗試將部門的開始與徽標的開始進行匹配。 如您所見，雖然我可以做到這一點，但我margin-left對.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類。

您可以在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;
}

注意導航欄的內部內容如何設置為與實際內容相同的寬度（該段落）。 這樣，您就不必使用那些愚蠢的頁邊距，並且圖像和文本應該對齊。