Bootstrap网格在特定断点失效，博客应用中小屏过渡时布局崩溃求助

我仔细看了你的代码和问题描述，发现布局崩溃的根源在于栅格类设置不符合Bootstrap移动优先的设计逻辑，加上图片固定高度在过渡断点时的挤压问题。下面给你具体的修复方案：

问题诊断 #

你当前用的列类是col-sm-2 col-md-4 col-lg-4，这里存在两个核心问题：

1. Bootstrap栅格是移动优先的，sm断点对应≥576px，md对应≥768px。当屏幕尺寸在576px-768px这个过渡区间时，会应用col-sm-2——这个宽度太窄，卡片内容直接挤压溢出，导致布局完全乱掉；而小于576px的屏幕你没有设置基础列宽，虽然会默认堆叠，但过渡区间的问题没解决。
2. 卡片图片固定了height:250px，窄屏时宽度收缩但高度不变，会导致图片变形，进一步加剧布局混乱。

修复方案 #

1. 调整栅格类，覆盖全断点区间 #

改成移动优先的列设置，确保每个屏幕区间都有合理的列宽：

• 小屏及以下（<576px）：col-12让卡片全屏堆叠
• 小屏到中屏（576px-768px）：col-sm-6一行显示2个卡片
• 中屏及以上（≥768px）：保留col-md-4一行3个卡片

这样过渡区间就不会出现过窄的列，布局自然稳定。

2. 优化图片自适应样式 #

给图片加上object-fit: cover，配合固定高度，让图片缩放时保持比例，避免变形挤压布局。

3. 替换原生<center>标签 #

用Bootstrap内置的text-center类代替原生<center>，更符合框架规范。

修改后的完整代码 #

HTML/EJS部分 #

<div class="container text-center">
  <h1>Blogs</h1>
</div>
<div class="container">
  <div class="row content">
    <% blogs.forEach(function(blog){ %>
    <div class="col-12 col-sm-6 col-md-4">
      <div class="card">
        <img src="<%= blog.image %>" alt="Blog cover image">
        <h4><%=blog.name%></h4>
        <p><%=blog.description %></p>
        <a href="/blogs/<%= blog._id %>" class="blue-button">Read More</a>
      </div>
    </div>
    <% }); %>
  </div>
</div>

CSS部分（仅修改图片相关样式） #

.row{
  margin-top:20px;
}
.card{
  background-color: #FFFFFF;
  padding:0;
  margin-top:20px;
  border-radius:4px;
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
}
.card:hover{
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
  color:black;
}
.card img{
  width:100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  height:250px;
  object-fit: cover; /* 新增：保持图片比例，避免变形 */
}
.card h4{
  margin:20px;
}
.card p{
  margin:20px;
  opacity: 0.65;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}
.blue-button{
  width: 100px;
  transition: background-color 1s , color 1s;
  min-height: 20px;
  background-color: #002E5B;
  color: #ffffff;
  border-radius: 4px;
  text-align: center;
  font-weight: lighter;
  margin: 0px 20px 15px 20px;
  padding: 5px 0px;
  display: inline-block;
}
.blue-button:hover{
  background-color: #dadada;
  color: #002E5B;
}

额外小贴士 #

• 如果不想裁剪图片，可以把object-fit: cover换成object-fit: contain，但会在图片周围留空白，根据你的设计需求选择即可。
• Bootstrap栅格的核心是移动优先，一定要从最小的断点开始设置样式，再逐步覆盖更大的断点，这样所有屏幕区间都能有合理的布局表现。

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