Question

我正在尝试为我目前正在处理的网站创建个人资料页面。在桌面上观看时（平板电脑上方的任何东西）我需要它显示彼此相邻的两张卡片，但由于卡片中的按钮在收缩时移动到位，因此设置了最小宽度。

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

所以当我在一个大型桌面上时，我已经做到了这一点，它将页面填满，两张卡片彼此相邻，这是完美的。

但是当我得到不到1175像素的时候，这两张牌开始相互重叠，而不是发生这种情况，我想让正确的牌跳到左边的卡片下面，里面有个人资料信息。

我已经做到了，所以它也不会出现在手机中，但我也希望它能用两个专栏来展示另一个用于移动设备的专栏。

HTML CODE：

<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

您是否尝试过使用脚本代码？您可以设置距离并为当前距离添加新类。不确定它是否会帮助你：）

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

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

                }
            }


        })

尝试在彼此旁边放置两列，但在缩小视口

1 个答案: