按兩列輸入600px媒體查詢時顯示兩個數據產品

Question

大家好，任何人都可以在我的網頁中幫助我解決我的問題我無法在 CSS/Bootrap 上通過兩個列顯示我的產品，我使用 bootstrap 4 我想自定義我的產品顯示這里是我想要在我的輸入 600px 媒體查詢時的產品列表

輸出

這是我現在的工作，我想在圖片上這樣顯示
圖像2圖像3

Answer 1

馬克 我使用 bootstrap 4 進行了一個類似的項目。首先，我將假設您將 bootstrap img-fluid 類用於卡片類中的圖像。 接下來，在媒體查詢中卡片類的 css 中，您需要設置一個 min-height 來覆蓋任何卡片的最大高度，因此它們的偶數。 例如最小高度：350px； 接下來，您需要在 600px 媒體查詢中為您的卡片類設置寬度。 我建議您在 google chrome 中使用移動響應模式並將其設置為 600px 寬，然后測試不同的像素寬度，直到正確為止。 如果您還沒有使用過谷歌移動工具，請右鍵單擊您的谷歌瀏覽器並選擇檢查。 在檢查窗口中，單擊左上角元素旁邊的圖標。 現在您在移動視圖中。 在左側的移動視圖中，單擊顯示手機類型的下拉菜單，然后選擇響應式。 將最大寬度設置為 600。這是代碼。

@media only screen and (max-width: 600px) {
    .card {
        width: 48%;
        min-height: 200px;
}