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

<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>

Bootstrap 4无法将3个图像与链接附加在一行上

1 个答案: