Нужно сделать сетку. Прописал код, но он выравнивает именно вертикально, впритык. Пытался удалять и сокращать col
, но изображения становятся огромными.
Буду рад очень помощи!
Версия bootstrap : v4.1.3
Код прикреплю, пример тоже.
<section id="catalog">
<section class="product-area section-padding" style="
padding-top: 40px;
padding-bottom: 60px;
">
<div class="container">
<div class="section-heading">
<div class="row">
<div class="col-md-12">
<div class="section-title-heading">
<h2 style="
font-size: 15px;
font-weight: 100;
"></h2>
</div>
</div>
</div>
</div>
<div class="product-contents fadeIn wow" style="visibility: visible">
<div class="row">
<div class="col-md-3 col-xs-6">
<img src="/Storage/imgs/97bdc3d4767a4104a0b5db068df2c9d6.jpg" alt="1" style="width:100%" height="100%">
</div>
</div>
</div>
<div class="product-contents fadeIn wow" style="visibility: visible">
<div class="row">
<div class="col-md-3 col-xs-6">
<img src="/Storage/imgs/eaf70216c2a547bdacdf91e65d289af5.jpg" alt="2" style="width:100%" height="100%">
</div>
</div>
</div>
<div class="product-contents fadeIn wow" style="visibility: visible">
<div class="row">
<div class="col-md-3 col-xs-6">
<img src="/Storage/imgs/fec8ffd80a73458bb53a872f795d8fb5.jpg" alt="3" style="width:100%" height="100%">
</div>
</div>
</div>
<div class="product-contents fadeIn wow" style="visibility: visible">
<div class="row">
<div class="col-md-3 col-xs-6">
<img src="/Storage/imgs/d7c60f274d8542299170029026519a0b.jpg" alt="4" style="width:100%" height="100%">
</div>
</div>
</div>
<div class="product-contents fadeIn wow" style="visibility: visible">
<div class="row">
<div class="col-md-3 col-xs-6">
<img src="/Storage/imgs/3739158971da413fad17b6c87b7ec6d4.jpg" alt="5" style="width:100%" height="100%">
</div>
</div>
</div>
<div class="product-contents fadeIn wow" style="visibility: visible">
<div class="row">
<div class="col-md-3 col-xs-6">
<img src="/Storage/imgs/9a264d04f13b4b8d86052c4f74ba5f09.jpg" alt="6" style="width:100%" height="100%">
</div>
</div>
</div>
</div>
</div>
</section>
</section>
Ребят, почти нашел решение (код), но теперь почему-то размеры второй колонки стали меньше ( скриншот):
<section id="catalog">
<section class="product-area section-padding" style="
padding-top: 40px;
padding-bottom: 60px;
">
<div class="container">
<div class="row text-center">
<div class="col-sm-4">
<img src="/Storage/imgs/97bdc3d4767a4104a0b5db068df2c9d6.jpg" alt="1" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/eaf70216c2a547bdacdf91e65d289af5.jpg" alt="2" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/fec8ffd80a73458bb53a872f795d8fb5.jpg" alt="3" style="width:100%" height="100%">
</div>
<div class="row text-center">
<div class="col-sm-4">
<img src="/Storage/imgs/d7c60f274d8542299170029026519a0b.jpg" alt="4" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/3739158971da413fad17b6c87b7ec6d4.jpg" alt="5" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/9a264d04f13b4b8d86052c4f74ba5f09.jpg" alt="6" style="width:100%" height="100%">
</div>
</div>
</div>
</div>
</section>
</section>
Вот этот код теперь делает, все наоборот
<div class="container">
<div class="col-sm-4">
<img src="/Storage/imgs/97bdc3d4767a4104a0b5db068df2c9d6.jpg" alt="1" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/eaf70216c2a547bdacdf91e65d289af5.jpg" alt="2" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/fec8ffd80a73458bb53a872f795d8fb5.jpg" alt="3" style="width:100%" height="100%">
</div>
<div class="row text-center">
<div class="col-sm-4">
<img src="/Storage/imgs/d7c60f274d8542299170029026519a0b.jpg" alt="4" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/3739158971da413fad17b6c87b7ec6d4.jpg" alt="5" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/9a264d04f13b4b8d86052c4f74ba5f09.jpg" alt="6" style="width:100%" height="100%">
</div>
</div>
</div>
</div>
Так, мы почти нашли решение
<section id="catalog">
<section class="product-area section-padding" style="
padding-top: 40px;
padding-bottom: 60px;
">
<div class="container">
<div class="row text-center">
<div class="col-sm-4">
<img src="/Storage/imgs/97bdc3d4767a4104a0b5db068df2c9d6.jpg" alt="1" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/eaf70216c2a547bdacdf91e65d289af5.jpg" alt="2" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/fec8ffd80a73458bb53a872f795d8fb5.jpg" alt="3" style="width:100%" height="100%">
</div>
<div class="row text-center">
<div class="col-sm-4">
<img src="/Storage/imgs/d7c60f274d8542299170029026519a0b.jpg" alt="4" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/3739158971da413fad17b6c87b7ec6d4.jpg" alt="5" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/9a264d04f13b4b8d86052c4f74ba5f09.jpg" alt="6" style="width:100%" height="100%">
</div>
</div>
</div>
</div>
</section>
Но почему размеры такие я не понимаю
Итак, решение было найдено
<section id="catalog">
<section class="product-area section-padding" style="
padding-top: 40px;
padding-bottom: 60px;
">
<div class="container">
<div class="row text-center">
<div class="col-sm-4">
<img src="/Storage/imgs/97bdc3d4767a4104a0b5db068df2c9d6.jpg" alt="1" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/eaf70216c2a547bdacdf91e65d289af5.jpg" alt="2" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/fec8ffd80a73458bb53a872f795d8fb5.jpg" alt="3" style="width:100%" height="100%">
</div>
<div class="container">
<div class="row text-center">
<div class="col-sm-4">
<img src="/Storage/imgs/d7c60f274d8542299170029026519a0b.jpg" alt="4" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/3739158971da413fad17b6c87b7ec6d4.jpg" alt="5" style="width:100%" height="100%">
</div>
<div class="col-sm-4">
<img src="/Storage/imgs/9a264d04f13b4b8d86052c4f74ba5f09.jpg" alt="6" style="width:100%" height="100%">
</div>
</div>
</div>
</div>
</div>
</section>
<div class="row text-center">
в середине кода, и лишний закрывающий</section>