0

我的网站在台式机和移动设备上运行良好,但是当我在平板电脑/ipad 上查看我的网站时,我的卡片图像消失了。我似乎无法弄清楚为什么我正在使用 Bootstrap 4/MDBootstrap 并且它自然响应。我以前从未发生过这种情况。我有一种感觉,我错过了一些简单的东西,但找不到它。我也没有自定义 CSS 文件。我正在使用 MDBoostrap 提供的 CSS。我只做了微小的更改,这些更改是在 HTML 文件中进行的。任何帮助,将不胜感激!

    <!--Grid column-->
    <div class="col-lg-4 col-xs-12">

      <!--Card-->
      <div class="card">

        <!--Card image-->
        <div class="view overlay"> 
          <img src="img/work1.jpg" class="img-fluid" alt="">
          <a href="http://www.eddiearkmunoz.com/" target="_blank"> 
            <div class="mask rgba-white-slight"></div>                
          </a> 
        </div>

        <!--Card content-->
        <div class="card-body text-center">
          <!--Title-->
          <h4 class="card-title">Mu&ntilde;oz Designs</h4>
          <!--Text-->
          <p class="card-text"><b>Languages:</b> HTML, CSS, Bootstrap, JavaScript, PHP</p>
          <a href="http://www.eddiearkmunoz.com/" target="_blank" class="btn btn" style="background-color: #1C2331;">View</a> 
        </div>

      </div>
      <!--/.Card--> 

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-xs-6">

      <!--Card-->
      <div class="card">

        <!--Card image-->
        <div class="view overlay"> 
          <img src="img/work2.jpg" class="img-fluid" alt=""> 
          <a href="http://www.ridewithamy.info/" target="_blank">                    
            <div class="mask rgba-white-slight"></div>                
          </a> 
        </div>

        <!--Card content-->
        <div class="card-body text-center">
          <!--Title-->
          <h4 class="card-title">Ride with Amy</h4>

          <!--Text-->
          <p class="card-text"><b>Languages:</b> HTML, CSS, MDBootstrap, Javascript</p> 
          <a href="http://www.ridewithamy.info/" target="_blank" class="btn btn" style="background-color: #1C2331;">View</a> 
        </div> 

      </div>
      <!--/.Card--> 

    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-xs-6">

      <!--Card-->
      <div class="card">

        <!--Card image-->
        <div class="view overlay"> 
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="img-fluid" alt=""> 
          <a href="#">                    
            <div class="mask rgba-white-slight"></div>                
          </a> 
        </div>

        <!--Card content-->
        <div class="card-body text-center">
          <!--Title-->
          <h4 class="card-title">WIP</h4>
          <!--Text-->
          <p class="card-text"> This WordPress website is being created for personal study. </p> 
          <a href="#" class="btn btn" style="background-color: #1C2331;">View</a> 
        </div> 

      </div>
      <!--/.Card--> 

    </div>
    <!--Grid column-->

  </div>
  <!--Grid row-->
4

0 回答 0