1

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

1
  • Лишний тег <div class="row text-center"> в середине кода, и лишний закрывающий </section>
    – dev_null
    Commented 11 окт. 2018 в 14:10

1 ответ 1

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 реализация карточки

8
  • Спасибо, а зачем вы сделали col-md-3 col-xs-6, именно вторая запись вообще не понятно, что она выполняет, буду признателен за ответ!
    – Anton
    Commented 11 окт. 2018 в 14:18
  • .col-xs-6 говорит о том, что на мобильных устройствах будет занято 6 колонок. Но с версии выше 3, -xs- уже убран.
    – entithat
    Commented 11 окт. 2018 в 14:19
  • Сделал по вашему коду, получилось, что все фотографии отдалились, размеры уменьшились + ничего не изменилось по состоянию с 2 линией фотографий, т.е. на том же месте, что и на скриншоте :с
    – Anton
    Commented 11 окт. 2018 в 14:21
  • так у меня не 3 версия, а 4, сейчас подключена.
    – Anton
    Commented 11 окт. 2018 в 14:21
  • @Anton xs - параметры отображения до 767px, sm - до 992px, md - до 1999px, lg - всё что больше. Цифра в классе определяет размеры относительно row, X/12. подредактировал твой код в вопросе (2-ой), пробуй
    – dev_null
    Commented 11 окт. 2018 в 14:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.