时间戳

首页 > 解决方案 > Boostrap4 轮播在过渡期间扩展

bootstrap-4 - Boostrap4 轮播在过渡期间扩展

问题描述

在下面的代码片段中，轮播在转换时推动容器元素，同时移动相邻元素（如果存在相邻元素）。原因是什么，您认为如何解决这个问题，以便在过渡时，相邻元素不会移动。

轮播代码： 

<html>
<header>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</header>
<body>


<div class="d-flex flex-row justify-content-center">


	
	<div class="my-5 mx-3">
		

	

	<div class="carousel slide carousel-fade w-100 pointer-event" id="featured" data-ride="carousel">
		  	<ol class="carousel-indicators">
			    <li data-target="#featured" data-slide-to="0" class=""></li>
			    <li data-target="#featured" data-slide-to="1" class="active"></li>
			    <li data-target="#featured" data-slide-to="2" class=""></li>
		    </ol>

		    <div class="carousel-inner">
			    <div class="carousel-item active carousel-item-left">
			      	<img class="d-block  m-auto" src="https://picsum.photos/id/500/400/300" alt="Convoluted Excel ">
			      	<div class="carousel-caption d-none d-md-block">
				        <h3>Headache!</h3>
				        <p> The current situation is nothing but headache! Clearly, simple is better than the complex situation at hand</p>
				    </div>
			    </div>

			    <div class="carousel-item carousel-item-next carousel-item-left">
			      	<img class="d-block m-auto " src="https://picsum.photos/id/600/400/300" alt="Excel Prone to errors">
				    <div class="carousel-caption d-none d-md-block">
				        <h3>SpreadSheet Headache!</h3>
				        <p> The first reason why we are so awesome. Another reason why we are so awesome </p>
				    </div>
			    </div>

			    <div class="carousel-item">
			    	<img class="d-block m-auto " src="https://picsum.photos/id/700/400/300" alt="Clear dashboard">
			    	<div class="carousel-caption d-none d-md-block">
				        <h3>Web-based Solution</h3>
				        <p>The first reason why we are so awesome. Another reason why we are so awesome. Yet another reason!</p>
				    </div>
			    </div>

		    </div>

			<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
			    <span class="carousel-control-prev-icon" aria-hidden="true">
			    	<span class="sr-only">Previous</span>
			    </span>
			</a>

    	 	<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
		    	<span class="carousel-control-next-icon" aria-hidden="true">
	    	    	<span class="sr-only">Next</span>
			    </span>
		    </a>
	</div>
	</div>
	<div class="fancy-layout py-2 px-2 my-5 mx-3">


	
		<div class="Bacground-triangleSVG"></div>
			<h2 class="fancy-text">Sign up for a free one-month trial</h2>
		<div class="flex-card-horizontal">
			<div class="vertical col-md-8">

				
					<form action="" method="post" id="signUpForm"><input type="hidden" name="csrfmiddlewaretoken" value="CTbqoQdjWoVXylqXbNL9bUOJurLZ0aTAOAna4j6fBRojFKQiOLcWz7">
						
						<div class="form-group">
							

<div id="div_id_email" class="form-group"> <label for="id_email" class="col-form-label  requiredField">
                Email<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="email" class="textinput textInput form-control" required="" id="id_email"> </div> </div> <div id="div_id_password1" class="form-group"> <label for="id_password1" class="col-form-label  requiredField">
                Password<span class="asteriskField">*</span> </label> <div class=""> <input type="password" name="password1" class="textinput textInput form-control" required="" id="id_password1"> </div> </div> <div id="div_id_password2" class="form-group"> <label for="id_password2" class="col-form-label  requiredField">
                Password Confirmation<span class="asteriskField">*</span> </label> <div class=""> <input type="password" name="password2" class="textinput textInput form-control" required="" id="id_password2"> </div> </div>

							<button type="submit" class="btn btn-primary" id="signup_button" disabled="">Sign Up <i class="fas fa-sign-in-alt"></i></button>
						</div>

					</form>

				
			</div>

			
			<div class="vertical"> 
				<div class="header pt-5" id="feedback"> </div>
				<div class="header pt-5">Password hint </div>

		        <div class="horizontal text-left">
					<span class="line" id="condition1"></span>
					<span class="line" id="condition2"></span>
					<span class="line" id="condition3"></span>

					
				</div>
				<div class="text-left pb-5">
						<ul>
							<li class="no-border pt-3"><span class="h4"></span><span class="h5" id="condition1Message">At least 6 characters</span></li>
							<li class="no-border pt-3"><span class="h4"></span><span class="h5" id="condition2Message">At least one uppercase letter</span></li>
							<li class="no-border pb-3"><span class="h4"></span><span class="h5" id="condition3Message">At least one number </span></li>
							

						</ul>
					</div>
			</div>		
	    
		</div>
	</div>

</div>

</body>
</html>

编辑 1： 由于某种原因，该片段不显示轮播标题。这是小提琴链接

标签： bootstrap-4carousel

解决方案

推荐阅读