Bootstrap登录页卡片白色边框问题及移除方法问询

你遇到的白色边框，本质是.card默认的白色背景，透过它和内部.row的细微尺寸差显露出来——之前页面背景是白色所以没察觉，换成深色背景后就明显了。下面是几个直接有效的解决方法：

方法一：彻底移除卡片默认背景与边框 #

直接覆盖.card的默认样式，让它变成透明且无边框状态：

.card {
  background-color: transparent;
  border: none;
  padding: 0; /* 去掉卡片默认内边距，消除和row的尺寸差 */
}

这个方法最直接，因为你的卡片内部已经有深色背景的列区域，完全不需要卡片本身的白色背景和边框。

方法二：修复内部行的布局偏移 #

如果不想完全去掉卡片样式，也可以调整移动端的列布局，避免留白透出卡片背景：
把左侧列的col-10 offset-1改成col-12——移动端本来需要满宽度显示，偏移会让列左右留白，这部分空隙就会露出卡片的白色背景：

<div class="col-12 col-md-6 order-md-1">

修改后的完整代码示例 #

将你的<style>部分替换成以下代码，即可解决问题：

<style>
  .card-body {
    padding: 0;
    background-color: transparent;
  }
  .card { 
    background-color: transparent;
    border: none;
    padding: 0;
  }
</style>

这样处理后，卡片和内部行的尺寸完全匹配，也不会有白色背景透出来，深色背景下就看不到所谓的“白色边框”了。

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