2017-08-15 72 views
1

我在使用「隱藏」類隱藏特定大小的內容時遇到問題。它適用於某些內容,但不適用於其他內容。Bootstrap 4「隱藏」類不一致工作

我用:

<div class="hidden-sm">something to hide in small viewports </div> 

我試過它的導航品牌標誌和它的作品,但它並沒有在導航欄,但有些作品圖片等...

使用代碼以下作品(但永久隱藏它)

<div hidden> something to hide in small viewports </div> 

使用下面的代碼在所有

不起作用

有人可以解釋一下這個用法嗎?引導文檔不提供太多的細節

另外,正如你可以清楚地告訴,我不是很好的CSS或JavaScript,所以我真的寧願只從CDN導入引導而不創建我自己的CSS文件。 (如果可能)

+0

比較遺憾的是,後期編輯 – willer2k

+0

你爲什麼不使用屬性類? –

+0

我該怎麼做呢? – willer2k

回答

1

在HTML中你有一個像類,ALT,SRC等屬性....

在你的第一個情況下,你正在使用的屬性類,並給它提供了一個自舉類,這是爲什麼有用。

第二個例子,你正在使用一個名爲隱藏的HTML屬性,這就是爲什麼它的作品。

第三個代碼不起作用,因爲hidden-sm不是有效的屬性。你需要,而不是說......

<div class="hidden-sm"> something to hide in small viewports </div> 

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

+0

嘿Chris,在youtube上觀看了你的django教程,真棒內容!感謝您的貢獻。 :)關於HTML屬性;現在它是有道理的,然而,它並不能解釋爲什麼它有時會起作用,有時它不起作用。何時何地可以使用此引導程序類? – willer2k

+0

謝謝!按照您的第一個示例提供的方式,您可以在任何地方使用該課程。規定這個班級風格的規則基於查看網頁的屏幕寬度。所以,當你縮小瀏覽器時,你會注意到佈局的變化,因爲引導CSS正在使用媒體查詢來告訴瀏覽器在屏幕有一定寬度時改變樣式。我會建議你在Chrome中拉起你的頁面。按F12打開開發工具並查看樣式選項卡以查看正在應用的樣式。 –

+0

好的。我一整晚都在玩它,我無法讓圖像隱藏在一定的尺寸。我正在使用bootstrap 4測試版。真的不知道該怎麼做,但我想我會在以後再回來看看。感謝您的幫助,男士和女士。 :) – willer2k