В чем может быть проблема выравнивания через row; col?

176

11 февраля 2019, 09:50

Нужно сделать сетку. Прописал код, но он выравнивает именно вертикально, впритык. Пытался удалять и сокращать 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>

Answer 1

<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="row"> 
        <div class="col-md-3 col-xs-6"> 
          <div class="product-contents fadeIn wow" style="visibility: visible"> 
            <img src="/Storage/imgs/97bdc3d4767a4104a0b5db068df2c9d6.jpg" alt="1" style="width:100%" height="100%"> 
          </div> 
        </div> 
        <div class="col-md-3 col-xs-6"> 
          <div class="product-contents fadeIn wow" style="visibility: visible"> 
            <img src="/Storage/imgs/97bdc3d4767a4104a0b5db068df2c9d6.jpg" alt="1" style="width:100%" height="100%"> 
          </div> 
        </div> 
      </div> 
    </div> 
 
    </div> 
  </section> 
</section>

Сначала row, затем col и уже внутри col реализация карточки

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

07:09
17:51

Как выбрать ноутбук для школьника
08:01
07:36

Что такое Grid Бот
07:00

Використання UGC контенту для соціальних мереж
21:22

Использование тестового аккаунта Google Analytics
20:00

Почему стоит покупать лицензионное ПО
20:14
07:41

Методы повышения посещаемости веб-сайта

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать кнопку 'Далее', чтобы она появлялась при определенном количестве слов?

Всем приветРебят, у меня вопрос, я задал размеры блоку height: 150; width: 250; Когда человек оставляет комментарий не более 25 слов, необходимо, чтобы...

146

jQuery

Смена атрибутов

Есть какие-то блоки и какие-то атрибуты, допустим вот так:

157

jQuery

создание jquery плагина используя react

Есть задача - создание дополнительного функционала для легаси-кода написанного на jqueryНа сколько приемлемо вообще создание jquery-плагина используя...

136

jQuery

Поменять ссылки на утерянные картинки

Имею галерею лайтбокс

137