0

我正在使用 Bootstrap 水平对齐两张卡片，但我想让它具有响应性，以便移动用户可以看到两张卡片堆叠在一起（在一列中）。到目前为止，我尝试将带有 @media 标签的 '''flex-direction''' 添加到 '''justify-content-center''' 标签。我还尝试删除 '''text-center'''、'''object-fit: contains;''' 并更改所有类型的 '''display'''。我对前端有点陌生。感谢任何帮助。

CSS：

.separado{
    display: inline-block;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 45%;
    text-align: center;
    margin-right: 5%; 
    margin-left: 5%;
    margin-bottom: 3%;
  }

  .imagen_top3{
    object-fit: contain;
    max-height: 600px;
    border: 5px solid #252727;
    padding: 1px;
  }

@media screen and (max-width: 980px) {
  .list-images img {
    width: 100%;
    margin: 3%;
    flex-direction: column;
  }
  .separado{
    zoom: 1; /* Trigger hasLayout */
    width: 100%;
    text-align: center;
    margin: 3%;
    flex-direction: column;
  }

  
}

HTML：

<div class="d-flex justify-content-center text-center">
      <div class="card text-center separado" style="width: 40%; background-color: #252727;">
        <img class="card-img-top imagen_top3" src="image1.jpeg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text" style="color:whitesmoke">Hi im John</p>
        </div>
      </div>
      <div class="card text-center separado" style="width: 40%;background-color: #252727;">
        <img class="card-img-top imagen_top3" src="image2.jpeg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text" style="color:whitesmoke">Hi im Peter</p>
        </div>
      </div>
</div>
4

1 回答 1

1

不需要 CSS，只需使用 bootstrap 内置网格即可；

<div class="row">
  <div class="col-xxl-6 col-md-12">
    <div class="card text-center">
      <img class="card-img-top" src="https://source.unsplash.com/ewqfhcrLoYA" alt="Card image cap">
      <div class="card-body">
        <p class="card-text" style="color:whitesmoke">Hi im John</p>
      </div>
    </div>
  </div>
  <div class="col-xxl-6 col-md-12">
    <div class="card text-center">
      <img class="card-img-top" src="https://source.unsplash.com/Edz4CIdzpA8" alt="Card image cap">
      <div class="card-body">
        <p class="card-text" style="color:whitesmoke">Hi im Peter</p>
      </div>
    </div>
  </div>
</div>

删除您提供的所有 CSS，除了用于样式目的的 CSS。

代码笔： https ://codepen.io/manaskhandelwal1/pen/rNMqYag

于 2021-01-12T20:20:36.340 回答