Вставьте блок между двумя блоками на мобильном телефоне с Bootstrap 4 - PullRequest
Новая
       10

Вставьте блок между двумя блоками на мобильном телефоне с Bootstrap 4

0 голосов
/ 07 января 2020

Я хочу получить следующий макет на рабочем столе: 

[1][2]
[3][2]

Мне нужно, чтобы столбец 2 был высотой 1 и 3. На рабочем столе.

Затем на мобильном устройстве я хочу, чтобы он выглядит так: 

[1]
[2]
[3]

Я попробовал 2 варианта:

Вариант 1: 

        <div class="row">
            <div class="col-md-7">
                <span>1</span>
            </div>

            <div class="col-md-5">
                <span>2</span>
            </div>

            <div class="col-md-7">
                <span>3</span>
            </div>
        </div>

Проблема в том, что блок 2 - это высота только блока 1.

Вариант 2:

Я думал об использовании порядка столбцов для вставки блока 2 между блоком 1 и блоком 3: 

        <div class="row">
            <div class="col-md-7">
                <div>
                    <span>1</span>
                </div>

                <div>
                    <span>3</span>
                </div>
            </div>

            <div class="col-md-5">
                <span>2</span>
            </div>
        </div>

Но я не думаю, что это возможно таким образом .

Есть ли другой способ, о котором я не думал? или это возможно с помощью одного из методов выше?

Спасибо.

Ответы [ 4 ]

0 голосов
/ 09 января 2020

Если кому-то понадобится решение в будущем, я использовал flex-direction: column и поместил высоту в контейнер:

HTML: 

        <div id="flex-container" class="row flex-lg-column">
            <div class="col-12 col-lg-6 order-1">
                <span>1</span>
            </div>

            <div class="col-12 col-lg-6 order-3">
                <span>2</span>
            </div>

            <div class="col-12 col-lg-6 order-2">
                <span>3</span>
            </div>
        </div>

CSS: 

@media (min-width: 992px) {

    #flex-container { 
        max-height: 40rem; 
    }
    #flex-container .order-1, 
    #flex-container .order-2, 
    #flex-container .order-3 { order: initial; }
}

И потому Bootstrap 4 .row имеет гибкую обертку: обертка, блок 3 обернут справа от двух блоки на экранах lg.

0 голосов
/ 07 января 2020

Я могу предложить вам использовать библиотеку под названием Masonry. Это быстро и легко реализовать. Ссылка: https://masonry.desandro.com/

С этим вы можете получить желаемый результат для настольной и мобильной версии, как вы упомянули.

Демо: https://codepen.io/Bibeva/pen/qBExWjj

HTML: 

<!-- bootstrap 4 css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row grid">
  <div class="col-md-6 grid-item">
    <span>1</span>
  </div>

  <div class="col-md-6 grid-item grid-item-box">
    <span>2</span>
  </div>

  <div class="col-md-6 grid-item">
    <span>3</span>
  </div>
</div>

<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- masonry js cdn-->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- custom js -->
<script>
$('.grid').masonry({
  // options
  itemSelector: '.grid-item'
});
</script>

CSS: 

.grid-item { 
  background: #000;
  color: #fff;
  height: 100px;
}

.grid-item-box { 
  height: 200px;
  background: #333;
}
0 голосов
/ 07 января 2020 

.container1{
    display:inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
 }
.container1 div {
    height: 50vh;
    width: 200px;
    margin: 0;
    border: 1px solid black;
    color: #fff;
    text-align: center;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    font-size: 50px;
    font-weight: bold;
}
.div1 {
    background: #f60;
}
.div2 {
    background: #f55;
    height: 100vh!important;
}
.div3 {
    position: absolute;
    bottom: 0;
    left:0;
    background: #0ae4dd;
}

  1
  2
  3



**For Mobile View** 
@media(max-width: 992px){
  .container1{
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
  }
  .container1 div {
    width:100%;
    height: auto;
  }
  .div2 {
    height: auto!important;
  } 
  .div3{
    position:inherit;
  }
}
0 голосов
/ 07 января 2020

попробуйте что-то вроде этого 

#flex_box1 div
{
  width:100%;
  height:150px;
  border: 2px solid #555;
  margin-bottom:15px;  
}
#flex_box1 div:last-child{ margin:0; }
#flex_box2 div
{
  width:100%;
  height:100%;
  background-color: #555; 
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-4 d-flex flex-column" id="flex_box1">
          <div></div>
          <div></div>
        </div>
        <div class="col-8 " id="flex_box2">
          <div></div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
...