时间戳

首页 > 解决方案 > 在桌面和移动/手风琴/移动 div 上的正确位置显示 div？

html - 在桌面和移动/手风琴/移动 div 上的正确位置显示 div？

问题描述

我有一个使用 bootstrap 4 的页面，它显示了我们团队的图像，并在您单击图像时使用手风琴显示 bios。

在桌面上它工作正常，连续有四个人的图像。当您单击个人资料时，生物会在它们下方显示。

但是，在移动设备上，视图变为四个垂直堆叠的人物图像。当您单击一个人时，生物将出现在底部，在第四个人之后。

我希望简历出现在您点击的人的下方。

示例图片： 所需的布局

代码示例：

<section class="p-5">
<div class="container" id="biolevelone">
<div class="row">
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio1"><img src="image1.png"/></div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio2"><img src="image2.png"/></div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio3"><img src="image3.png"/></div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio4"><img src="image4.png"/></div>
    </div>
</div> <!-- row -->

<div class="collapse pt-2" id="bio1" data-parent="#biolevelone">
   <div class="card-body">
     <p>Bio text, a couple of paragraphs</p>
   </div>
</div>
<div class="collapse pt-2" id="bio2" data-parent="#biolevelone">
   <div class="card-body">
     <p>Bio text, a couple of paragraphs</p>
   </div>
</div>
<div class="collapse pt-2" id="bio3" data-parent="#biolevelone">
   <div class="card-body">
     <p>Bio text, a couple of paragraphs</p>
   </div>
</div>
<div class="collapse pt-2" id="bio4" data-parent="#biolevelone">
   <div class="card-body">
     <p>Bio text, a couple of paragraphs</p>
   </div>
</div>

</div><!--biolevelone data parent -->
</section>

我尝试在每个个人资料图像 div 之间向上移动生物文本卡代码，但后来我遇到了相反的问题。即在桌面上，当单击图像时，所有个人资料图像突然从行中消失并移动到生物文本下方，而在移动设备上工作正常。

标签： htmlcssbootstrap-4accordion

解决方案

我只想问是否可以在您的 div 上添加类，如果可以，请看看我做了什么。

不过，稍微解释一下，只需将包含传记的 div 移动到包含图像的 div 之后。然后我只是添加类，以便我可以操作 div。然后添加媒体查询以显示传记。

无论如何，请看下面：

.bio-container {
  position: relative; 
}
.biography {
    position: absolute;
    top: 200px;
    border: 1px solid;
    width: 100%;
}

@media only screen and (max-width: 812px) {
    .biography {
        position: static;
    }
    .collapse {
        display: block !important;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<section class="p-5">
<div class="container" id="biolevelone">
<div class="row bio-container">
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio1"><img src="https://dummyimage.com/100x100/000000/ffffff"/></div>
    </div>
    <div class="collapse pt-2 biography" id="bio1" data-parent="#biolevelone">
       <div class="card-body">
         <p>Bio text, a couple of paragraphs 1</p>
       </div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio2"><img src="https://dummyimage.com/100x100/000000/ffffff"/></div>
    </div>
    <div class="collapse pt-2 biography" id="bio2" data-parent="#biolevelone">
       <div class="card-body">
         <p>Bio text, a couple of paragraphs 2</p>
       </div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio3"><img src="https://dummyimage.com/100x100/000000/ffffff"/></div>
    </div>
    <div class="collapse pt-2 biography" id="bio3" data-parent="#biolevelone">
       <div class="card-body">
         <p>Bio text, a couple of paragraphs 3</p>
       </div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio4"><img src="https://dummyimage.com/100x100/000000/ffffff"/></div>
    </div>
    <div class="collapse pt-2 biography" id="bio4" data-parent="#biolevelone">
       <div class="card-body">
         <p>Bio text, a couple of paragraphs 4</p>
       </div>
    </div>
</div> <!-- row -->





</div><!--biolevelone data parent -->
</section>

推荐阅读