2

Всем привет. Столкнулся с проблемой,- верстка блоков на бутстрапе.
Если добавлять им классы col, то вроде как надо становятся, но не по центру они. А нужно по центру сверстать. Как правильно это сделать?

Может стоит им отдельные классы добавить и flex`ом сверстать?

Посоветуйте что-нибудь.

введите сюда описание изображения

<section class="projects scroll_to_projects">
  <h2 class="projects_heading">Проекты</h2>
  <div class="container m-auto">
    <div class="row">
      <div class="col-lg-3 col">
        <div class="projects_block">
          <img src="img/redline.png" alt="">
          <h3 class="projects_block_heading">
            Red Line & Power China
          </h3>
          <p class="projects_block_paragraph">
            Совместное предприятия компании <a target="blank" class="projects_block_link_redline" href="https://skrl.ru">«Red Line»</a> и «Power China Guiyang Engineering 
            Corporation limited», в целях освоения строительных 
            заказов топливно- энергетического комплекса 
            <br>в России.
          </p>
          <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a>
          <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a>

        </div>
      </div>
      <div class="col-lg-3 col">
        <div class="projects_block">
          <div class="projects_block_imgs">
            <a href="img/slider/3.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/
            3.jpg" alt=""></a>
            <a href="img/slider/2.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/
            2.jpg" alt=""></a>
            <a href="img/slider/1.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/
            1.jpg" alt=""></a>
            <a href="img/slider/4.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/
            4.jpg" alt=""></a>
            <a href="img/slider/5.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/
            5.jpg" alt=""></a>
            <a href="img/slider/6.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/
            6.jpg" alt=""></a>
            <a href="img/slider/7.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/
            7.jpg" alt=""></a>
            <a href="img/slider/8.jpg" data-lightbox="roadtrip"><img class="projects_block_img" src="img/
            8.jpg" alt=""></a>
          </div>
          <h3 class="projects_block_heading projects_block_heading_overlay">
            Русская деревня
          </h3>
          <p class="projects_block_paragraph">
            Совместно с Чунцинской международной туристической корпорацией, ведется разработка проектов деревянных домов, в русском стиле, для строительства туристического городка 
            <br>на горе Лотоса, в городе <br>Фен-ду.
          </p>
        </div>
      </div>
      <div class="col-lg-3 col">
        <div class="projects_block">
          <img src="img/chun.png" alt="">
          <h3 class="projects_block_heading">
            ЧУНиТ - СПБГУ
          </h3>
          <p class="projects_block_paragraph">
            «Чунцинский университет науки и технологией – Санкт-Петербургский горный университет»: по средствам
            контактов торгово-
            промышленной палаты между университетами организовано плотное сотрудничество.
          </p>
          </p>
        </div>
      </div>
      <div class="col-lg-3 col">
        <div class="projects_block">
          <img src="img/saqr.png" alt="">
          <h3 class="projects_block_heading">
            saqr trevel
          </h3>
          <p class="projects_block_paragraph">
            Тур оператор <a target="blank" class="projects_block_link_saqr" href="https://saqrtravel.com">«Saqr travel Saint-Petersburg»</a>, является представителем международной компании
            «Saqr travel». Мы осуществляем прием туристических групп 
            <br>и индивидуалов в городе Санкт-Петербурге, а также 
            <br>по всей территории России.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

3
  • Смущает класс col, и класс m-auto. Возможно в пользовательских стилях сбиты стандартные бутстраповские padding
    – dev_null
    Commented 11 окт. 2018 в 2:06
  • да это я экспериментировал. и последний код просто скопировал
    – Roman
    Commented 11 окт. 2018 в 2:13
  • Может попробовать к row добавить justify-content-md-center, а так вот ссылочка, много интересно про сетку bootstrap bootstrap-4.ru/docs/4.0/layout/grid
    – nicolaa
    Commented 11 окт. 2018 в 8:36

1 ответ 1

2
  1. Для карточек в bootstrap 4 есть готовое решение card.

  2. Я бы предложила такое решение с col-lg-3 col-md-6 под каждое разрешение:

.projects {
  background: url(https://images.unsplash.com/photo-1526634967460-8009daabbe9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a21239c4a8c9ec18d385c4f92e9f5118&auto=format&fit=crop&w=909&q=80) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
  
  
<section class="projects scroll_to_projects">
  <h2 class="projects_heading">Проекты</h2>
  
  <div class="container">
    <div class="row">
      
      <div class="col-lg-3 col-md-6">
        <div class="card projects_block">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1527904248767-cfe951e81ab0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ff427782f4ef8063f45ce874e7e7025a&auto=format&fit=crop&w=600&q=60" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title projects_block_heading">
              Red Line & Power China
            </h3>
            <p class="card-text projects_block_paragraph">
              Совместное предприятия компании <a target="blank" class="projects_block_link_redline" href="https://skrl.ru">«Red Line»</a> и «Power China Guiyang Engineering 
              Corporation limited», в целях освоения строительных 
              заказов топливно- энергетического комплекса 
              <br>в России.
            </p>
            <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a>
            <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a>
          </div>
        </div>
      </div>
      
      <div class="col-lg-3 col-md-6">
        <div class="card projects_block">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1516491575772-bab9f75948c0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67c8699f273e4051d9ab9e19c6c83614&auto=format&fit=crop&w=600&q=60" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title projects_block_heading">
              Русская деревня
            </h3>
            <p class="card-text projects_block_paragraph">
              Совместно с Чунцинской международной туристической корпорацией, ведется разработка проектов деревянных домов, в русском стиле, для строительства туристического городка 
            <br>на горе Лотоса, в городе <br>Фен-ду.
            </p>
            <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a>
            <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a>
          </div>
        </div>
      </div>
      
      <div class="col-lg-3 col-md-6">
        <div class="card projects_block">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1517315003714-a071486bd9ea?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e6610aa0e51014aa2a57fee0356f0722&auto=format&fit=crop&w=600&q=60" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title projects_block_heading">
              ЧУНиТ - СПБГУ
            </h3>
            <p class="card-text projects_block_paragraph">
              «Чунцинский университет науки и технологией – Санкт-Петербургский горный университет»: по средствам
              контактов торгово-
              промышленной палаты между университетами организовано плотное сотрудничество.
            </p>
            <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a>
            <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a>
          </div>
        </div>
      </div>
    
      <div class="col-lg-3 col-md-6">
        <div class="card projects_block">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1527904248767-cfe951e81ab0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ff427782f4ef8063f45ce874e7e7025a&auto=format&fit=crop&w=600&q=60" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title projects_block_heading">
              saqr trevel
            </h3>
            <p class="card-text projects_block_paragraph">
              Тур оператор <a target="blank" class="projects_block_link_saqr" href="https://saqrtravel.com">«Saqr travel Saint-Petersburg»</a>, является представителем международной компании
              «Saqr travel». Мы осуществляем прием туристических групп 
              <br>и индивидуалов в городе Санкт-Петербурге, а также 
              <br>по всей территории России.
            </p>
            <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a>
            <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Если же все же задавать просто col, то для выравнивания по центру для row нужно добавить класс justify-content-center - выровнять контент по центру.

.projects {
  background: url(https://images.unsplash.com/photo-1526634967460-8009daabbe9d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a21239c4a8c9ec18d385c4f92e9f5118&auto=format&fit=crop&w=909&q=80) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
  
  
<section class="projects scroll_to_projects">
  <h2 class="projects_heading">Проекты</h2>
  
  <div class="container">
    <div class="row justify-content-center">
      
      <div class="col">
        <div class="card projects_block mx-auto" style="width: 18rem;">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1527904248767-cfe951e81ab0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ff427782f4ef8063f45ce874e7e7025a&auto=format&fit=crop&w=600&q=60" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title projects_block_heading">
              Red Line & Power China
            </h3>
            <p class="card-text projects_block_paragraph">
              Совместное предприятия компании <a target="blank" class="projects_block_link_redline" href="https://skrl.ru">«Red Line»</a> и «Power China Guiyang Engineering 
              Corporation limited», в целях освоения строительных 
              заказов топливно- энергетического комплекса 
              <br>в России.
            </p>
            <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a>
            <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a>
          </div>
        </div>
      </div>
      
      <div class="col">
        <div class="card projects_block mx-auto" style="width: 18rem;">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1516491575772-bab9f75948c0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=67c8699f273e4051d9ab9e19c6c83614&auto=format&fit=crop&w=600&q=60" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title projects_block_heading">
              Русская деревня
            </h3>
            <p class="card-text projects_block_paragraph">
              Совместно с Чунцинской международной туристической корпорацией, ведется разработка проектов деревянных домов, в русском стиле, для строительства туристического городка 
            <br>на горе Лотоса, в городе <br>Фен-ду.
            </p>
            <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a>
            <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a>
          </div>
        </div>
      </div>
      
      <div class="col">
        <div class="card projects_block mx-auto" style="width: 18rem;">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1517315003714-a071486bd9ea?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e6610aa0e51014aa2a57fee0356f0722&auto=format&fit=crop&w=600&q=60" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title projects_block_heading">
              ЧУНиТ - СПБГУ
            </h3>
            <p class="card-text projects_block_paragraph">
              «Чунцинский университет науки и технологией – Санкт-Петербургский горный университет»: по средствам
              контактов торгово-
              промышленной палаты между университетами организовано плотное сотрудничество.
            </p>
            <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a>
            <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a>
          </div>
        </div>
      </div>
    
      <div class="col">
        <div class="card projects_block mx-auto" style="width: 18rem;">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1527904248767-cfe951e81ab0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ff427782f4ef8063f45ce874e7e7025a&auto=format&fit=crop&w=600&q=60" alt="Card image cap">
          <div class="card-body">
            <h3 class="card-title projects_block_heading">
              saqr trevel
            </h3>
            <p class="card-text projects_block_paragraph">
              Тур оператор <a target="blank" class="projects_block_link_saqr" href="https://saqrtravel.com">«Saqr travel Saint-Petersburg»</a>, является представителем международной компании
              «Saqr travel». Мы осуществляем прием туристических групп 
              <br>и индивидуалов в городе Санкт-Петербурге, а также 
              <br>по всей территории России.
            </p>
            <a target="blank" class="redline" href="docs/RedLine.pdf">RedLine.pdf</a>
            <a target="blank" class="powerchina" href="docs/PowerChina.pdf">PowerChina.pdf</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Можно еще вспомнить старый добрый display: inline-block для колонок и text-align:center для обертки.

Ваш ответ

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

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