Bootstrap Card小屏设备宽度不一致如何设置所有卡片统一宽度？

你遇到的问题核心原因有三点：

1. 栅格类与card类绑定在同一个DOM节点，卡片内容会直接撑开外层栅格的宽度
2. 仅指定了col-sm-12适配≥576px的小屏，低于该宽度的设备没有明确的宽度约束
3. 外层自定义flex容器未适配Bootstrap栅格的gutter规则，flex子项默认宽高计算受内容影响

大屏能正常显示是因为md、lg断点下有明确的33.33%宽度占比约束，不会被内容撑开。按以下步骤修改即可解决：

• 分离栅格列与卡片组件：栅格列仅负责控制宽度，卡片作为列的子元素自动撑满列宽
• 外层容器使用Bootstrap原生row类替代自定义flex样式，自动适配栅格间距与换行规则
• 补充col-12类适配所有小于576px的最小屏设备，强制宽度占比100%

修改后的代码如下：

<!-- 外层替换自定义flex样式为Bootstrap原生row类 -->
<div class="row">
<asp:Repeater ID="rptOrders" runat="server" EnableViewState="true" >
   <ItemTemplate>
      <!-- 单独定义栅格列，新增col-12适配最小屏，移除card相关属性 -->
      <div class="col-12 col-md-4 col-lg-4">
         <!-- 卡片单独作为子元素，保留原有卡片样式 -->
         <div class="card text-center h-100" style="border-radius: 20px; border: 1px solid rgba(0,0,0,.125);float: none!important; overflow:hidden;">
            <h3><a href='Txxxx?id=<%#Eval("Id")%>'><%#Eval("Name")%></a></h3>
            <%# getLang(Eval("Lang").ToString()) %>  
            <%# DateTime.Parse(Eval("Date").ToString()).ToString("yyyy-MM-dd")%> - <%# DateTime.Parse(Eval("StartTime").ToString()).ToString("hh:mm tt")%>
            <p> - Seats <%# getPlace(int.Parse(Eval("Id").ToString()), Eval("Count").ToString()) %></p>
            <p style="background-color:white!important">
               <%# getLink(int.Parse(Eval("Id").ToString())) %> 
               <a href='Details.aspx?id=<%#Eval("Id")%>' style="background: #7accb240;"> details</a>
            </p>
         </div>
      </div>
   </ItemTemplate>
   <FooterTemplate>
      <asp:Label ID="lblEmptyData" runat="server" Visible='<%# ((Repeater)Container.NamingContainer).Items.Count == 0 %>' Text="yyy"></asp:Label>
   </FooterTemplate>
</asp:Repeater>
</div>

如果修改后仍有宽度偏差，可给卡片节点补充width: 100%的行内样式强制约束宽度。

内容的提问来源于stack exchange，提问作者user15602549