我的媒體查詢并未應用于此，div .col-3盡管它確實適用于其他媒體查詢。這是選擇器/類的問題嗎？@media screen and (min-width: 600px) and (max-width: 719px) { .col-3 { flex: 0 50%; max-width: 50%; } }<div class="row fade show"> <div class="col-3"> <div class="ProductBox_root__13DPQ"> <div class="ProductBox_photo__Xs8BM"><img src="https://images.pexels.com/photos/245208/pexels-photo-245208.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="Aenean Ru Bristique 1" class="ProductBox_image__1ECK5"> <div class="ProductBox_sale__1WcD7">sale</div> <div class="ProductBox_buttons__uyJNx"><a href="#" class="Button_small__2W39u">Quick View</a><a href="#" class="Button_small__2W39u"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-basket" class="svg-inline--fa fa-shopping-basket fa-w-18 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path fill="currentColor" </path> </svg> ADD TO CART</a></div> </div>讓我確認一下我添加了<meta name="viewport" content="width=device-width, initial-scale=1.0" />所以一定是別的東西。
4 回答
犯罪嫌疑人X
TA貢獻2080條經驗 獲得超4個贊
我決定通過向 React 組件添加響應類來應用 RWD，如下所示：
className='col-12 col-sm-6 col-lg-3'>
這對我有用，我希望有人會發現這很有用。感謝您的所有回答！
浮云間
TA貢獻1829條經驗 獲得超4個贊
您還可以通過 Id 定位 div
<div id="custom" class="col-3">
#custom.col-3 {
flex: 0 50%;
max-width: 50%;
border: 2px solid red
}
https://jsfiddle.net/brnt49je/
- 4 回答
- 0 關注
- 204 瀏覽
添加回答
舉報
0/150
提交
取消