为几乎所有其他像素编写媒体查询

Question

我的React项目上有一个页面，其中包含以卡格式的客户数据，现在我的屏幕上有3张卡片，现在问题是，我正在尝试使其响应迅速，并且当我尝试使用时，稍微降低了屏幕的宽度，最后一张卡上了下一行，并在最后一行留下了很大一部分空间，为了克服这个问题，我开始添加媒体查询并降低了我的卡宽度，但出现的问题是我已经出现了要在每2个像素后进行一次，我是否必须为每2个像素编写媒体查询？还是还有其他方法？这是问题的屏幕截图： -

Here is my JSX for this card only:-
<div className={`${customercss.parts} ${customercss.customer_card}`}>
                                <div className={customercss.card_wrap}>
                                <div className={customercss.customer_card_details} id={customercss.heading}>
                                    <div className={customercss.customer_name}>
                                        {elem.customer_name}
                                    </div>
                                    <label className={customercss.select_option}>
                                         <input type="checkbox" name="checks" value={elem._id} id="checkbox" onClick={(e)=>selected_items(e,elem)} />
                                         <span class={customercss.checkmark_span} ></span>
                                    </label>  
                                </div>
                                <div className={customercss.customer_card_details} id={customercss.customer_address}> <LocationOnOutlined htmlColor='#f7c6c6'/> {elem.customer_address}</div>
                                <div className={customercss.customer_card_details} id={customercss.date}> <CalendarToday htmlColor='#f7c6c6'/> {elem.date}</div>
                                <div className={customercss.customer_card_details} id={customercss.customer_other_options}>
                                    <div className={customercss.customer_other_options_parts} id={customercss.option1}>
                                        <div id={customercss.option1_1}>Subscriptions</div>
                                        <div id={customercss.option1_2}>{elem.customer_items.length}</div>
                                    </div>
                                    <div className={customercss.customer_other_options_parts} id={customercss.option2}>
                                        <MoreHoriz id={customercss.threedots} onClick={()=>{editcustomer(elem); show_edit_customer_details(elem)}} />
                                    </div>
                                </div>
                                </div>
                                
                            </div>

这是CSS（我刚刚添加了主框的CSS，而不是内部CSS）： -

.customer_card_box{
    display: flex;
    flex-wrap: wrap;
}

.customer_card{
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
    background-color: white;
    width: 15rem;
    height: 13rem;
    border-radius: 20px;
    margin-left: 3%;
}

@media (max-width:1034px){
    .customer_card{
        width: 14rem;
    }
}

@media (max-width:979px){
    .customer_card{
        width: 13.5rem;
    }
}

@media (max-width:949px){
    .customer_card{
        width: 13rem;
    }
}

@media (max-width:920px){
    .customer_card{
        width: 13rem;
    }
}

.card_wrap{
    margin: 1rem;
}

Answer 1

您必须使用col-md-12的课程：

<div class="col-md-12"> 

fin fin your.css文件使用媒体征服。
希望它能起作用。尝试一下。