HTML CSS Boostrap 5在较大屏幕上响应某些元素看起来不同

Question

我正在练习制作网页，并且正在使用 boostrap 5。我的网站已经可以使用 @media 对移动设备进行响应，但是当我尝试在更大的屏幕尺寸上查看我的网页时，某些 div - 部分 - 行不在其位置而其他人则在自己的位置上保持完美。无论屏幕大小如何，如何使整个列居中。

当它达到我的分辨率时，它看起来很完美 在此处输入图像描述，

但是当我缩小时，它会向左移动 在此处输入图像描述

HTML

<div class="contaier">
<div class="card">
 <div class="row">
   <div class="col-12 col-md-8">
 <div class="circle"> </div>
 <div class="col-6 col-md-4"></div>
 <h1>TOKEN</h1>
</div>
 <div class="content1">
 <p>The token will be launched in phase 2, which will serve as a passive reward for each of our DIVERS and as a token for the metaverse economy that is being built for the third phase.</p>
</div>
 <img src="http://luxtopia.org/wp-content/uploads/2022/02/haseowo.gif">
</div>
</div>
</div>
</div>

CSS

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    text-decoration: none;
    text-shadow: #000000 0px 0 14px;
    
  } 

  
  body{
    background-image: url(http://luxtopia.org/wp-content/uploads/2022/03/ffinal.png);
    height: 100%;
    width: 100%;
    background-size: auto;
    background-position: bottom center;
    font-family: 'Varela', sans-serif;
    overflow-x: hidden ;
    background-size: 100% 102.5%;
    background-attachment: scroll;
    background-repeat: no-repeat; 
    resize: both;
    color: var(--font-color);
    

  }
 .cards .container{
    object-fit: contain;
    display:inline-block;
    width: 100%;
    padding: 1% 15%;
  }

  .card{
    position: relative;
    bottom: 850px;
    left:230px;
    width: 400px;
    height: 300px;
    background:#335bb7;
    border-radius: 100px;
    display: flex;
    align-items: center;
    transition: 0.5s;
    border-style: none;
  }

  .card h1{
    position:absolute;
    left: 148%;
    font-size: 30px;
    bottom: 50%;
  }
  .card2 h1{
    position:absolute;
    right: 115%;
    font-size: 30px;
    bottom: 50%;
  }
  .card3 h1{
    position:absolute;
    left: 93%;
    font-size: 30px;
    bottom: 50%;
  }
  .card4 h1{
    position:relative;
    right: 46%;
    font-size: 30px;
    top: 5%;
  }

  .card .circle{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
  }

  .card .circle::before{
    content:'';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: #335bb7;
    clip-path: circle(120px at center);
    transition:0.05s;
    display:hidden;

  }

  .card:hover .circle:before
  {
    background: #00fcf3;
    clip-path: circle(400px at center);
    height: 250px;
    border-radius: 20px;

  }

  .card img{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 250px;
    width: 250px;
    pointer-events: none;
    transition:0.05s;

  }
  .card:hover img{
    left: 2%;
    top: 35%;
    height: 400px;
    width: 400px;
  }

  .card .content1
  {
    position: absolute;
    width: 50%;
    left: 10%;
    padding:10px 0px 0px 20px;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
   
  }

  .card:hover .content1
  {
    left: 0;
    opacity: 1;
    visibility: visible;
    left: 40%;
    padding: 65px 20px;
  }

感谢所有花时间阅读我的帖子的人，我很感激任何形式的帮助:')

Answer 1

1. 您的第一个

   类名有拼写错误（contaier -> container）。

2. 添加一些弹性属性：

   .卡片{

    justify-content：中心；
   

   }

您也可以使用引导类来代替：

<div class="card justify-content-center"></div>

这会将卡的子元素居中。在您的情况下：

不确定您的行或列是否有问题，因为您只发布了代码片段。如果您在列居中方面遇到问题，只需将此引导类添加到相应的 div 中即可：