引导4 Safari图像和文本重叠
引导4 Safari图像和文本重叠
提问于 2020-02-19 13:43:36
图像和列的文本重叠。也许图像的高度是错误的，或者图像不能很好地调整大小。
这种情况发生在safari浏览器上，在引导4的小屏幕上。
我为Bootstrap 4 Safari on Mac Grid issue尝试了不同的解决方案，但这无助于解决问题。
示例：
<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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-19 13:43:36
您只需在图像的父元素中使用类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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60301770
复制相关文章
相似问题
腾讯云开发者
