Boostrap 4 столбца слияния с чередующимися строками - PullRequest
Новая
       12

Boostrap 4 столбца слияния с чередующимися строками

0 голосов
/ 02 апреля 2020

Мой bootstrap сайт имеет макет из двух колонок (на рабочем столе). В каждом столбце содержимое статически складывается. div с обеих сторон имеют различную высоту, например: 

A | B
A | D 
C | D
E | F
E

Прямо сейчас я реализовал этот макет двумя col-6 и заполнил каждый контентом div. * 1007. *

Однако точки останова для мобильного макета предназначены только для укладки столбцов друг на друга, например: 

A
A
C
E
E
B
D
D
F

Моя проблема в том, что на моих рисунках выше A div имеет отношение к B div, а не к C div. Я хотел бы реализовать свой макет рабочего стола из двух столбцов таким образом, чтобы макет мобильного устройства был следующим: 

A
A
B
C
D
D
E
E
F

На мобильном устройстве для эффективного объединения внутренней части двух столбцов необходимо чередовать div они содержат в последовательности строк. Мой мизинец говорит мне, что это не будет возможно в bootstrap с двумя col-6. Я хотел бы избежать JavaScript и обычай CSS везде, где это возможно. Возможно, общий макет должен быть реализован без col-6. Может быть, card-deck может помочь, но я не нашел ничего удовлетворительного.

Текущий код: 

         <div class="container">        
            <div class="row pl-sm-3 px-1">        
                <div class="col-md-6 pt-sm-4">
                  <div class="row pb-5 justify-content-center">
                    <h1 class="display-4 text-light">   
                        {{ $.Page.Title }}
                    </h1>
                  </div>
                  <div class="text-center">
                    {{ range .Params.pictures }}
                        <img ... >
                    {{end}}
                  </div>
                </div>        
                <div class="col-md-6 pl-3 pr-4">
                    <div class="mt-5 pt-5"></div>
                    <div class="card">
                    {{ range .Params.text}}
                        <div class="card-body">            
                            ...
                        </div>
                    {{end}}
                    </div>
                </div>
            </div>
          </div>

1 Ответ

1 голос
/ 02 апреля 2020

Вы можете сделать это с помощью bootstrap, но вы должны добавить небольшой фрагмент CSS ниже. После некоторого тестирования у меня есть решение для вас, где я также использовал сетку карт.

Если вы хотите использовать карты Boostraps, вы можете добавить класс card к каждому дочернему элементу (с классом col). 

@media (min-width: 576px) {
  .card-columns.column-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
<div class="container">
  <div class="card-columns column-2 row d-sm-block">
    <div class="col-12 order-1">A<br/>A</div>
    <div class="col-12 order-2">C</div>
    <div class="col-12 order-1">B</div>
    <div class="col-12 order-2">D<br/>D</div>
  </div>
  <div class="card-columns column-2 row d-sm-block">
    <div class="col-12 order-1">E<br/>E</div>
    <div class="col-12 order-2">F</div>
  </div>
</div>
...