Bootstrap 4 Неполадки при выравнивании 3 изображений со ссылками на один ряд

Question

Так что я работаю над своим портфолио для классного проекта, и я изо всех сил стараюсь выровнять свои проекты в одну строку.Вот что мне нужно / мне нужна помощь ....

<div class="container">
   <div class="row">
  <div class="col-md-4">
    <a href="https://codepen.io/Designird/pen/JwLQoj" target="_blank" class="project project-title">
                <img class="img-thumbnail" src="https://i.imgur.com/8TGwqfY.jpg" alt="project">
                <div class="project-tile">Howard Stern Tribute Page</div>
            </a>
      </div>
     </div>
  <div class="col-md-4">
     <a href="https://codepen.io/Designird/pen/Jwemdd" target="_blank" class="project project-title">
                <img class="img-thumbnail" src="https://i.imgur.com/UtN8xFJ.jpg" alt="project">
                <div class="project-tile">Product Landing Page</div>
            </a>
      </div>
   </div>
  <div class="col-md-4">
     <a href="https://codepen.io/Designird/pen/xmoWLB" target="_blank" class="project project-title">
                <img class="img-thumbnail" src="https://i.imgur.com/lY9IvVn.jpg" alt="project">
                <div class="project-tile">UFO Sighting Survey</div>
            </a>
      </div>
  </div>
</div>
  </div>

Answer 1

Первое, что я заметил, было то, что у вас слишком много закрывающих тегов </div>.Вы должны правильно сделать отступ в своем коде, чтобы было легко заметить это.Я добавил img-fluid класс к изображениям, чтобы они были отзывчивыми и не переполняли контейнер.

Проверьте приведенный ниже фрагмент во весь экран.

Я удалил много элементов и оставил то, что было важнорешить проблему.Я надеюсь, что это поможет.

Вы также должны проверить документацию Bootstrap, у вас есть все. ССЫЛКА

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

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid" src="https://i.imgur.com/8TGwqfY.jpg" alt="">
        <div>Howard Stern Tribute Page</div>
      </a>
    </div>
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid" src="https://i.imgur.com/UtN8xFJ.jpg" alt="">
        <div>Product Landing Page</div>
      </a>
    </div>
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid" src="https://i.imgur.com/lY9IvVn.jpg" alt="">
        <div>UFO Sighting Survey</div>
      </a>
    </div>
  </div>
</div>