Bootstrap卡片边框消失、栅格布局失效问题求助

你遇到的布局错位、卡片样式异常问题，核心原因是HTML标签嵌套混乱，再加上一个Bootstrap栅格类的笔误，咱们一步步来修复：

1. 核心问题：标签嵌套破坏了组件结构 #

看你第二、第三张卡片的代码，<a>标签和.card、.card-body的嵌套完全出错了！比如第二张卡片的错误结构：

<div class="card mt-4">
  <a href="pages/10_28_16.html">
    <img class="card-img-top" src="images/fulls/04.jpg" alt="...">
  </div> <!-- 这里提前闭合了.card，导致card-body跑到卡片外面了！ -->
  <div class="card-body"><h5 class="card-title">Oct. 28, 2016</h5> </div>
</a>

这种错误会让浏览器自动修复DOM结构，直接打乱Bootstrap卡片的样式逻辑（边框、内部布局全失效），同时栅格列的高度变得不一致，导致第三张卡片被挤到下一行。

2. 次要问题：栅格类笔误 #

Bootstrap里没有col-lx-4这个类，你应该是想写col-xl-4（对应超大屏的4列布局），这个笔误会影响超大屏幕下的显示效果。

修正后的完整代码 #

<div id="posts">
  <div id="content" class="container">
    <div class="row">
      <!-- 第一张卡片（原结构正确） -->
      <div class="col-md-6 col-lg-4 col-xl-4">
        <div class="card mt-4">
          <a href="pages/01_25_18.html">
            <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
            <div class="card-body">
              <h5 class="card-title">Jan. 25, 2018</h5>
            </div>
          </a>
        </div>
      </div>

      <!-- 第二张卡片（修复嵌套错误） -->
      <div class="col-md-6 col-lg-4 col-xl-4">
        <div class="card mt-4">
          <a href="pages/10_28_16.html">
            <img class="card-img-top" src="images/fulls/04.jpg" alt="...">
            <div class="card-body">
              <h5 class="card-title">Oct. 28, 2016</h5>
            </div>
          </a>
        </div>
      </div>

      <!-- 第三张卡片（修复嵌套错误） -->
      <div class="col-md-6 col-lg-4 col-xl-4">
        <div class="card mt-4">
          <a href="pages/10_28_16.html">
            <img class="card-img-top" src="images/fulls/03.jpg" alt="...">
            <div class="card-body">
              <h5 class="card-title">Oct. 28, 2016</h5>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

修正说明 #

• 把第二、第三张卡片里提前闭合的.card标签移到<a>标签之后，确保.card-body完全包裹在.card内部，Bootstrap的卡片样式（边框、内边距等）就能正常生效了。
• 将col-lx-4改为col-xl-4，匹配Bootstrap官方的栅格断点命名规则。
• 调整了代码缩进，让结构更清晰，方便后续排查问题。

修改后就能实现你想要的响应式效果：大屏（lg/xl）显示3列、中屏（md）显示2列、小屏自动显示1列，卡片的边框和尺寸也会恢复正常。

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