使用引导5.1.3在响应屏幕中覆盖文本的图像

Question

截图显示涵盖文字的图片：

​

​

代码：

​

.project-1, .project-2, .project-3, .project-4{
margin: 5% 7%;
height: 400px;
}

.unilever-project, .instagram-pic, .cork-airport-project,.instagram-page-cooking {
  width: 60%;
  height: 330px;
}
.text{
  text-align: left;
  margin-top:10px;
}

  <div class="projects">

<div class=" row project-1">
  <div class="col-lg-6">
    <img src="images/Unilever.png" alt="unilever-project" class="bg-dark unilever-project">
  </div>
  <div class="col-lg-6 text">
    <h3>Unilever Internship Competition</h3>
    <p>I was asked to build a business purpose plan for one of their chosen products to promote their substainability and sales. I picked Hellmann's and built an integrated marketing campaign about food education for chilren in Ireland. Even
      though I only made it to the final, I enjoyed the whole experience and learnt a lot.</p>
  </div>
</div>


<div class="project-2">
  <div class="row">
    <div class="col-lg-6 ">

      <img src="images/instagram-PI.jpg" alt="instagram-pic" class=" bg-dark instagram-pic">
    </div>
    <div class="col-lg-6 text ">
      <h3>Instagram Innovation for Parternship International</h3>
      <p>I was doing an internship at PI and I wanted to do an innovation to improve the channel. I formed a strategy by changing the layout, creating contents, stories, videos, hashtags, paid advertising and so on. We successfully increased the
        number of followers by 5000 after 4 months. </p>
    </div>
  </div>
</div>

<div class="project-3">

  <div class="row">

    <div class="col-lg-6 ">


      <img src="images/Cork airport.jpg" alt="cork-airport-project" class="bg-dark cork-airport-project">
    </div>
    <div class="col-lg-6 text">
      <h3>Cork Airport Social Media Campaign</h3>
      <p>The Airport aimed to market share of 4% year on year and 2 share points by the end of the year through a social and digital campaign. My group in college created a FaceBook and Instagram campaigns called Everywhere from Home. The
        campaign would be promoted by micro-influencers who would live stream their journeys to different destination departuring from Cork Airport. Also, there would be online competition to encourage travel to the selected destinations. We got
        a great mark for the project. </p>
    </div>
  </div>
</div>

<div class="project-4">
  <div class="row">
    <div class=" col-lg-6">
      <img src="images/cookingpage.png" alt="instagram-page-cooking" class="bg-dark instagram-page-cooking">
    </div>
    <div class="col-lg-6 text">
      <h3>My own Instagram - Kokoseatingworld</h3>
      <p>Kokoseatingworld is where I share my passion about food and photography.</p>
    </div>
  </div>
</div>
  </div>

​

在大屏幕上，它工作得很好，但在中小屏幕上，它在这里不工作properly.enter代码。

我是新来的，一个月前才开始工作。我能为这个做些什么？

还有其他方法可以做到吗？我用的是Bootstrap 5.1.3

Answer 1

我刚试过你的密码我看上去很好。而不是你使用的图片，我添加了一个背景颜色，所以我可以看到发生了什么。老实说，我在使用Bootstrap和Vscode时遇到了一些故障，一旦重新启动，这些问题就得到了解决。

这就是我尝试你的代码时得到的：

​

​

您的代码+背景色：

   <style>
        .project-1, .project-2, .project-3, .project-4{
margin: 5% 7%;
height: 400px;
}

.unilever-project, .instagram-pic, .cork-airport-project,.instagram-page-cooking {
  width: 60%;
  height: 330px;
}
.text{
  text-align: left;
  margin-top:10px;
}
    </style>
<div class="projects">

    <div class=" row project-1">
        <div class="col-lg-6">
            <img src="images/Unilever.png" alt="unilever-project" class=" bg-dark unilever-project">
        </div>
        <div class="col-lg-6 text">
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </div>
    </div>


    <div class="project-2 ">
        <div class="row">
            <div class="col-lg-6">

                <img src="images/instagram-PI.jpg" alt="instagram-pic" class=" bg-warning instagram-pic">
            </div>
            <div class="col-lg-6 text">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet </p>
            </div>
        </div>
    </div>

    <div class="project-3">

        <div class="row">

            <div class="col-lg-6">


                <img src="images/Cork airport.jpg" alt="cork-airport-project" class="bg-primary cork-airport-project">
            </div>
            <div class="col-lg-6 text">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet </p>
            </div>
        </div>
    </div>

    <div class="project-4">
        <div class="row">
            <div class=" col-lg-6">
                <img src="images/cookingpage.png" alt="instagram-page-cooking" class="bg-danger instagram-page-cooking">
            </div>
            <div class="col-lg-6 text">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
    </div>
</div>

Answer 2

如果您删除高度css，它将修复该问题。

这里：

    .project-1, .project-2, .project-3, .project-4{
margin: 5% 7%;

}