首頁(yè) 猿問(wèn) 為什么我的 DIV 不響應(yīng)行和列斷點(diǎn)？

為什么我的 DIV 不響應(yīng)行和列斷點(diǎn)？

Html5

慕尼黑5688855 2023-10-24 19:51:37

我正在我的網(wǎng)站上創(chuàng)建一行突出顯示的產(chǎn)品。在桌面視圖上我有 5 個(gè)產(chǎn)品。當(dāng)我使用中型設(shè)備時(shí)，我希望有 2 種產(chǎn)品，最后在移動(dòng)設(shè)備上有 1 種產(chǎn)品。在閱讀了 Bootstrap 關(guān)于網(wǎng)格系統(tǒng)和行的文檔后，我添加了row-cols語(yǔ)法，但沒(méi)有任何反應(yīng)。我確信我錯(cuò)過(guò)了一些東西，但我不知道它是什么。另外，在我在這里展示的 codepen 項(xiàng)目中，產(chǎn)品的信息（圖像和文本）被壓縮。這是我的 CodePen。這就是我的電腦桌面視圖中的樣子（看起來(lái)不錯(cuò)）當(dāng)我縮小屏幕尺寸時(shí)，這就是我的電腦上的樣子。不好。

查看完整描述

3 回答

楊__羊羊

TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊

對(duì)此版本進(jìn)行更改，您將擁有網(wǎng)格。并確保您將使用 Bootstrap 4

<div class="col-sm-6 col-md-2">example</div>

</div>

反對(duì) 回復(fù) 2023-10-24

人到中年有點(diǎn)甜

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊

上面的評(píng)論做到了：

嘗試這個(gè)。在兩個(gè)不同的部分中制作這些產(chǎn)品的兩個(gè)引導(dǎo)布局。一種適用于較大的屏幕，一種適用于較小的屏幕。（對(duì)于較小的屏幕，您可以根據(jù)您的喜好定義 3 行或 2 行）但保持小屏幕布局不可見(jiàn)。在 CSS 中添加媒體查詢(xún)，這將使大屏幕布局不可見(jiàn)，并在到達(dá)斷點(diǎn)時(shí)使小屏幕布局可見(jiàn)。

反對(duì) 回復(fù) 2023-10-24