Bootstrap 4 - Сетка 1 и 2 Изменить положение

Question

Пример, что мне нужно:

Изображение:

Мой код такой:

<div class="container">
        <div class="row">
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <div class="col-6">
                <img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Belgrade">
            </div>
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-right" alt="Niš">
            </div>
        </div>
        <!-- THIS IS PROBLEM -->
        <div class="row">
            <!-- THIS COLUMN NEED TO BE BELOW 1 COLUMN / LEFT SIDE -->
            <div class="col-3">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <!-- THIS COLUMN NEED TO BE BELOW 3 COLUMN / RIGHT SIDE -->
            <div class="col-3 ml-auto">
                <img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
            </div>
        </div>
        <!-- END PROBLEM -->
        <div class="row">
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail float-left" alt="Novi Sad">
            </div>
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail mx-auto d-block" alt="Novi Sad">
            </div>
            <div class="col-4">
                <img src="image1.png" class="img-thumbnail float-right" alt="Novi Sad">
            </div>
        </div>
    </div>

Я не могу понять, где проблема.Если кто-то знает, где проблема, напишите решение.Спасибо

PS.Извините за мой плохой английский

Спасибо всем ..

Answer 1

Редактировать: я обновил свой ответ, чтобы включить фоновые изображения и лучше имитировать исходный макет.Спасибо AndreiGheorghiu за помощь в более точном ответе.

.grid{
  display: grid;
  grid-gap:10px;
  height:500px;
  grid-template-columns: 1fr .2fr 1fr .2fr 1fr;
  grid-template-areas: "topLeft large large large topRight"
                       "midLeft large large large midRight"
                       "bottomLeft bottomLeft bottomCenter bottomRight bottomRight";
}

.pic{
  background:	url(https://placeimg.com/400/400/any) no-repeat center/cover;
  font: 700 20px sans-serif;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  text-shadow:2px 2px 5px #000;
}

.pic-1{
   grid-area: topLeft;
}

.pic-2{
   grid-area: large;
}

.pic-3{
   grid-area: topRight;
}

.pic-4{
   grid-area: midLeft;
}

.pic-5{
   grid-area: midRight;
}

.pic-6{
   grid-area: bottomLeft;
}

.pic-7{
   grid-area: bottomCenter;
}

.pic-8{
   grid-area: bottomRight;
}

<div class="grid">
  <div class="pic pic-1">Foxwoods</div>
  <div class="pic pic-2">New York City</div>
  <div class="pic pic-3">Las Vegas</div>
  <div class="pic pic-4">Philadelphia</div>
  <div class="pic pic-5">San Francisco</div>
  <div class="pic pic-6">Miami</div>
  <div class="pic pic-7">Boston</div>
  <div class="pic pic-8">Washington D.C.</div>
</div>

Answer 2

Вы можете попробовать этот код,

Примечание: включены адаптивные классы.Запустите этот код как полную страницу

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
        </div>
        <div class="col-md-6">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Belgrade">
        </div>
        <div class="col">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Niš">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail mt-md-4" alt="Novi Sad">
        </div>
    </div>
    <div class="row mt-md-4">
        <div class="col-md-4">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
        </div>
        <div class="col-md-4">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
        </div>
        <div class="col-md-4">
            <img src="https://via.placeholder.com/800x800" class="img-fluid img-thumbnail" alt="Novi Sad">
        </div>
    </div>
</div>

Answer 3

Вы должны поместить маленькие изображения в один и тот же столбец.И отобразить их в виде блоков: display:block; width: 100%; height: auto;.

Вот как я лично это сделаю.Я использую .no-gutter класс на .row с и белые границы на изображениях:

[my-gallery]:not(#_) {
  padding: 8px;
}
[my-gallery] img {
  display: block;
  background-color: #f5f5f5;
  width: 100%;
  height: auto;
  border: 8px solid white;
}
[my-gallery] .strethed img {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid" my-gallery>
        <div class="row no-gutters">
            <div class="col">
                <img src="https://picsum.photos/300/200/?random" alt="Novi Sad">
                <img src="https://picsum.photos/303/202/?random" alt="Novi Sad">
            </div>
            <div class="col-6 strethed">
                <img src="https://picsum.photos/306/204/?random" alt="Belgrade">
            </div>
            <div class="col">
                <img src="https://picsum.photos/309/206/?random" alt="Niš">
                <img src="https://picsum.photos/312/208/?random" alt="Novi Sad">
            </div>
        </div>
        <div class="row no-gutters" >
            <div class="col">
                <img src="https://picsum.photos/315/210/?random" alt="Novi Sad">
            </div>
            <div class="col">
                <img src="https://picsum.photos/318/212/?random" alt="Novi Sad">
            </div>
            <div class="col">
                <img src="https://picsum.photos/321/214/?random" alt="Novi Sad">
            </div>
        </div>
    </div>