基於Bootstrap的佈局 - navbar品牌顯示img＆文本內聯＆對齊

-1

我正在爲我的僱主開發一個網站，並在我們的「品牌重塑」階段遇到了一些問題。有問題的頁面可以在這裏找到：http://chargehubdevchris.azurewebsites.net/基於Bootstrap的佈局 - navbar品牌顯示img＆文本內聯＆對齊

該問題是專門針對索引頁面，並關注品牌標誌/文字。文字使用的是網頁字體（我們生成的），而徽標是內嵌在Navbar品牌類定位標記中的圖像。

img強制兩個元素從所需的高度下降約10px，並且超過了nav的期望高度。

有問題的代碼如下：

<div class="navbar-header page-scroll"> 
<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="navbar-brand page-scroll" href="#page-top"><img class="homelogo" src="logos/ChargeHub-Logo.png"/><span class="greylogo">Charge</span>Hub</a> 
     </div>

我試圖用「拉左」類的IMG，然後與資產淨值的其餘正確對齊文本，但離開img離線。我已經將pull應用到其他元素，嘗試調整垂直對齊，甚至是一些負邊距。他們並沒有真正達到我想要的水平，也沒有讓更多的頭痛感染下去。

我也嘗試將它們放在一個div中，將它浮動，將它設置爲顯示內聯塊，但我無法讓它發揮很好。

我知道我必須丟失一些可能相當明顯的東西，但我試過了所有我能想到的，以及我可以在網上找到的所有東西都無濟於事，並且希望有人能幫我解決這個問題。這似乎是必須有一個簡單的方法來引導來實現這一點，因爲我不能第一個嘗試！

來源

2016-02-11 Fox

在您的<a class="navbar-brand page-scroll" href="#page-top">元素中，更改padding-top屬性以使其位於上方。

.navbar-default .navbar-brand { 
    padding-top: 0; 
}

我看到當你向下滾動時，一些JS代碼會將navbar-shrink類添加到欄中。嘗試在此類別下添加填充頂部修改：

.navbar-brand :not(.navbar-shrink) { 
    padding-top: 0; 
}

來源

2016-02-11 21:56:24

感謝您的答覆！我也嘗試過，它可以在全尺寸的環境下工作，但所有較小的視口或其他頁面都會破壞佈局，需要更多的修補程序......似乎必須有更好的方法。還有其他想法嗎？ – Fox

@Fox當你向下滾動頁面時，你是否試圖在JS中做某事？ –

我不確定你在問什麼。我們確實有JS，它使索引頁面上的錨點和其他幾個簡化了滾動。但我沒有寫這個，我不認爲這是造成這個問題的原因。 – Fox

我的確以這種方式解決了這個問題。

.navbar-brand img { 
     position: absolute; 
     top: 0px; 
    }

謝謝:)

來源

2016-02-11 22:18:39 arnuga3

感謝您的回覆。雖然這不是我想要的，但現在它只是將徽標圖像放在頁面的最頂部，而不是與文本內聯。如此屏幕截圖所示。 https://www.dropbox.com/s/5w7royun2gl7jy8/Screenshot%202016-02-12%2009.32.23.png?dl=0 我錯過了什麼嗎？ – Fox

您是否使用該標記的其他css？它適用於我，如果你可以讓jsfiddle或至少可以顯示CSS我會盡力幫助。謝謝 – arnuga3

是的，還有其他的CSS應用於這些標籤，但我不打算把它全部放在這裏...儘管就img標籤而言，沒有什麼應該與它衝突。我不知道它是如何工作的，但它並不適合我。我很感謝你試圖幫助，但我只是用兩者的圖像替換文字和標誌。 – Fox

基於Bootstrap的佈局 - navbar品牌顯示img＆文本內聯＆對齊

回答

相關問題