html CSS 大屏幕上的 bootstrap 5 响应有些元素看起来不同

Question

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

在我的分辨率下它看起来很完美 enter image description here

但是当我缩小时它会向左移动 enter image description here

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;
  }

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

Answer 1

您的第一个 <div> class-name (contaier -> container) 中有错字。
加几个flex-attributes:

.卡{
```
 justify-content: center;
```
}

您也可以使用 bootstrap classes 代替：

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

这使卡片的 child-elements 居中。在你的情况下：<div class="row"> 不确定您的行或列是否有问题，因为您只发布了一段代码。如果您对列的居中有疑问，只需将 bootstrap class 添加到相应的 div: <div class="row justify-content-center">

html CSS 大屏幕上的 bootstrap 5 响应有些元素看起来不同

html CSS boostrap 5 responsive on larger screen some elements looks different

html

css

frontend

bootstrap-5

web-frontend