html - 试图让两列彼此相邻，但在缩小视口(viewport)时重叠

Question

我正在尝试为我当前工作的站点创建一个配置文件页面。在台式机(平板电脑上方的任何设备)中查看此内容时，我需要它显示两张相邻的卡片，但由于卡片中的按钮在收缩时会移出位置，因此设置了最小宽度。

我在每一侧都有一些空列来填充页面。

所以我已经做到了，当你在一个大桌面上时，它会填充页面并且两张卡片彼此相邻，这是完美的。

但是当我小于 1175px 时，两张卡片开始相互重叠，而不是发生这种情况，我希望右卡片跳到包含个人资料信息的左卡片的正下方。

我已经做到了，因此它也不会显示在移动设备中，但我也希望它在移动设备上也显示为两列中的一列在另一列下方。

HTML 代码:

<div class="container-fluid pcontainer">
<div class="row">
    <div class="col-2 d-none d-lg-block">
    test
    </div>

    <div class="col-4 d-none d-md-block">
        <div class="card pc mw-100">
          <div class="card-title">
          <img class="pp card-img-top img-fluid rounded-circle" src="img/pp.jpg" alt="Card image cap">
          <h4 class="pt card-title text-left text-justify"> Ryan Edwards </h4>
          <button type="button" class="btn btn-sm btnp btn-outline-info">Add Friend</button>
          <button type="button" class="btn btn-sm btn-outline-success">Message</button>
          </div>
          <div class="card-body">
            <h3> My Biography: </h3>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
    </div>

    <div class="col-4 d-none d-md-block">
        <div class="card pc mw-100">
          <div class="card-title">
          <img class="pp card-img-top img-fluid rounded-circle" src="img/pp.jpg" alt="Card image cap">
          <h4 class="pt card-title text-left text-justify"> Ryan Edwards </h4>
          <button type="button" class="btn btn-sm btnp btn-outline-info">Add Friend</button>
          <button type="button" class="btn btn-sm btn-outline-success">Message</button>
          </div>
          <div class="card-body">
            <h3> My Biography: </h3>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
    </div>

    <div class="col-2 d-none d-lg-block">
    test
    </div>
</div>

这是CSS:

.pc {
margin: 0px;
min-width:390px;       
width: auto !important;  
width:390px;            

}

.pp {
max-width: 125px;
width: 125px;
max-height: 125px;
height: 125px;
margin-top: 40px;
margin-right: 40px;
float: right;

}

.pt {
margin-top: 50px;
margin-left: 50px;
}

.btnp {
margin-left: 50px;
}

.btn {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 8px;
padding-right: 8px;
}

Answer 1

您是否尝试过使用脚本标签？ 您可以设置距离并为当前类(class)添加新类(class)。不确定它是否会帮助你:)

$(document).ready(() => {
        $(document).scroll(() => {
            if ($('.yourclass').offset().top - $(window).scrollTop() <= 25) {

                if ($(window).scrollTop() < 400) {
                    $('.yourclass').removeClass('currentyclass');
                } else {
                    $('.yourclass').addClass('newestclass');

                }
            }


        })