如何将引导卡从水平堆叠到垂直以使其响应？

Posted 2023-03-28

【中文标题】如何将引导卡从水平堆叠到垂直以使其响应？

【英文标题】：How to stack bootstrap cards from horizontally to vertical in order to make it responsive?

【发布时间】：2021-04-17 19:44:31

【问题描述】：

我正在使用 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" >
        <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" >
        <div class="card-body">
          <p class="card-text" style="color:whitesmoke">Hi im Peter</p>
        </div>
      </div>
</div>

【参考方案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" >
      <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" >
      <div class="card-body">
        <p class="card-text" style="color:whitesmoke">Hi im Peter</p>
      </div>
    </div>
  </div>
</div>

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

Codepen：https://codepen.io/manaskhandelwal1/pen/rNMqYag

【讨论】：

嗨，我注意到你使用了 bootstrap 5，但我使用的是 4.5（抱歉没有指定）。我尝试了你的 codepen，虽然它可以工作，但如果我将 boostrap 版本更改为我的，它就会中断。

@Petko 对于 Bootstrap V4.5，将类 .col-xxl-6 更改为 col-xl-6。那么它应该可以完美运行。

@Petko 你可以在这里测试它：codepen.io/manaskhandelwal1/pen/zYKmRqL?editors=1100