Показывать div в правильном месте на рабочем столе и мобильном / гармошке / перемещать div? - PullRequest
Новая
       13

Показывать div в правильном месте на рабочем столе и мобильном / гармошке / перемещать div?

0 голосов
/ 27 февраля 2020

У меня есть страница с использованием bootstrap 4, которая показывает изображения нашей команды и использует аккордеон, чтобы показать b ios, когда вы нажимаете на изображение.

На рабочем столе работает нормально, четыре изображения людей подряд. Биография раскрывается под ними, когда вы нажимаете на профиль.

Однако на мобильном телефоне вид меняется на четыре изображения людей в вертикальном порядке. Когда вы нажимаете на человека, биография появляется внизу, после четвертого человека.

Я хочу, чтобы биография отображалась под человеком, на которого вы щелкаете.

Пример изображения: desired layout

Пример кода: 

<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 изображения профиля, но затем я столкнулся с противоположной проблемой. то есть на рабочем столе, все изображения профиля внезапно исчезают из строки и перемещаются ниже биотекста при нажатии на изображение, при этом отлично работают на мобильном телефоне.

1 Ответ

0 голосов
/ 27 февраля 2020

Я просто хочу спросить, возможно ли добавить классы в ваш 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>
...