2017-06-02 94 views
0

我的網站是www.rosstheexplorer.com佈局問題當我展開的寬度我的瀏覽器

當設備寬度小於601px大於我想下面的情況發生

  1. 我不想在菜單和 自定義標題之間永遠有空間
  2. 我不希望有任何空間位於客戶標題之上。我現在已經解決了這個問題,請看這裏的解決方案Reducing White Space Above Your Header Image Regardless Of The Browser Size
  3. 我不希望H1,插件或頁面上的任何其他內容與客戶標題重疊。我現在通過使用我在'無論瀏覽器大小的情況下減少標題圖像上方的空白空間'鏈接討論的代碼來解決此問題。
  4. 我不希望有任何空白的客戶頭左側或右側。我現在已經解決了這個問題,請看這裏的解決方案Increasing The Width Of Your Header
  5. 我想總能看到'Ross The Explorer'的全文,我不想讓最後一個R被刪除。我現在使用'增加標題寬度'鏈接中的代碼討論解決了這個問題。
  6. 導航菜單欄始終是頁面的全長。

請看www.nomadicmatt.com,瞭解我想達到的目標。

回答

1

我不認爲您正在正確加載所需的Bootstrap CSS和JS。

加載http://www.rosstheexplorer.com/wp-content/themes/penscratch/css/bootstrap-3.3.7.css會導致404錯誤(未找到),並且http://www.rosstheexplorer.com/wp-content/themes/penscratch/js/bootstrap.min.js也會發生。

所以發現這個樣子你的排隊功能:

wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/css/bootstrap-3.3.7.css'); 
wp_enqueue_script('bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js'); 

並將其更改爲:

wp_enqueue_style('bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
wp_enqueue_script('bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'); 
+0

請參閱我的問題的底部。我現在已根據您的回覆對其進行了編輯。 –

+0

@RossSymonds這是因爲你不再試圖加載這些網址。由於您在服務器上沒有正確位置的文件,因此我上面給出的代碼會從maxcdn服務器加載引導文件。因此,當使用我的代碼時,嘗試添加一些引導html,如一個按鈕,看看它是否工作 - 「' –

+0

我在哪裏添加代碼<按鈕類型=「按鈕」class =「btn btn-primary」>主? –

0

你指的是引導,3.3.7.css在你的頭,但這個文件在您的服務器上/此地址上不存在。 你可以使用一個CDN加載自舉CSS和JS所以你不會費心讓您的服務器上的這些文件,只是頭部標籤中添加這兩個標籤:

CSS:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

JS:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
+0

您的自定義標題沒有顯示的原因是因爲您使用百分比來定義它的高度,但沒有容器可供參考。如果您使用像素或任何其他非相對單位,您的自定義標題將顯示出來。 例如,編輯您在第一篇文章中提供給我們的CSS代碼,而不是'height:40%'將其設置爲'height:500px'。 這並不完美,但應該把你放在正確的方向。 另外,如果您使用我的解決方案,爲了擺脫404錯誤,請刪除您在function.php中添加的代碼。 'wp_enqueue_style ...' 和 'wp_enqueue_script ...'。 –

+0

@RossSymonds爲了使它看起來更好看,把你的'

'從父母div(col-sm-12和row)中取出。您不需要創建行或在此處使用列系統,您的自定義標題具有絕對位置 - 相對於您的頁面本身。 –

+0

我現在已經嘗試將自定義標題放入容器中,但仍無法解決問題。 –

相關問題