Bootstrap 4 Safari 图片和文字重叠

Question

图像和列的文本重叠。可能是图片的高度不对，或者图片的大小调整不好。

这发生在 safari 小屏幕浏览器 bootstrap 4.

我针对尝试了不同的解决方案，但对解决问题没有帮助。

示例：

<html>
<head>
<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</script>
</head>
<body>
 <div id="Step0" style="margin-left:auto; margin-right:auto;" >
  <div class="container-fluid d-flex flex-column h-100 justify-content-between">
   <div class="row mt-5">
    <div class="col-12">
     <h1 class="text-center">My Awsome - Tutorial</h1>
    </div>
    <div class="col-12 mt-4">
     <h3 class="text-center">Welcome</h3>
    </div>
   </div>
   <div class="row">
    <div class="col-12">
     <p class="mx-5 text-center">
      Welcome to the esatus Wallet - Tutorial.
      <br>
      If you haven't installed the app allready you can donwload the App now for 
      iPhone or
      Android.
      <br><br>
      The tutorial has the follwoing topics.
     </p>
    </div>
    <div class="col-12 d-flex">
     <div class="mx-auto">
      <ul>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
      </ul>
     </div>
    </div>
    <div class="col-12 d-flex">
     <img src="https://www1-lw.xda-cdn.com/files/2017/05/stack-overflow.png" class="mx-auto img-fluid">
    </div>
   </div>
   <div class="row justify-content-end mb-5">
    <div class="col-12 d-flex">
     <button href="#" type="button" class="invisible btn btn-primary m-auto invisible" >INVISBLE</button>
     <button href="#" type="button" class="btn btn-primary m-auto" onclick="return show('Step1','Step0');">Next</button>
    </div>
   </div>
  </div>
 </div>
</body>
</html>

Answer 1

您只需在图像的父元素中使用 class justify-content-center。

<html>
<head>
<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</script>
</head>
<body>
 <div id="Step0" style="margin-left:auto; margin-right:auto;" >
  <div class="container-fluid d-flex flex-column h-100 justify-content-between">
   <div class="row mt-5">
    <div class="col-12">
     <h1 class="text-center">My Awsome - Tutorial</h1>
    </div>
    <div class="col-12 mt-4">
     <h3 class="text-center">Welcome</h3>
    </div>
   </div>
   <div class="row">
    <div class="col-12">
     <p class="mx-5 text-center">
      Welcome to the esatus Wallet - Tutorial.
      <br>
      If you haven't installed the app allready you can donwload the App now for 
      iPhone or
      Android.
      <br><br>
      The tutorial has the follwoing topics.
     </p>
    </div>
    <div class="col-12 d-flex">
     <div class="mx-auto">
      <ul>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
       <li>here some text</li>
      </ul>
     </div>
    </div>
    <div class="col-12 d-flex justify-content-center">
     <img src="https://www1-lw.xda-cdn.com/files/2017/05/stack-overflow.png" class="mx-auto img-fluid">
    </div>
   </div>
   <div class="row justify-content-end mb-5">
    <div class="col-12 d-flex">
     <button href="#" type="button" class="invisible btn btn-primary m-auto invisible" >INVISBLE</button>
     <button href="#" type="button" class="btn btn-primary m-auto" onclick="return show('Step1','Step0');">Next</button>
    </div>
   </div>
  </div>
 </div>
</body>
</html>

Bootstrap 4 Safari 图片和文字重叠

Bootstrap 4 Safari Images and text overlap

mobile-safari

bootstrap-4