छवि और स्तंभों का पाठ ओवरलैप होता है। हो सकता है कि छवि की ऊंचाई गलत हो या छवि का आकार ठीक से न हो।

यह सफारी ब्राउज़र में छोटी स्क्रीन पर बूटस्ट्रैप 4 के साथ होता है।

मैंने मैक ग्रिड मुद्दे पर बूटस्ट्रैप 4 सफारी के लिए विभिन्न समाधानों की कोशिश की लेकिन यह समस्या को हल करने में मदद नहीं करता है।

उदाहरण:

Example

<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>
0
MrMaavin 19 फरवरी 2020, 16:43

1 उत्तर

सबसे बढ़िया उत्तर

आपको बस छवि के मूल तत्व में 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>
0
MrMaavin 19 फरवरी 2020, 16:43