我是在一个小型网站项目中使用 Bootstrap 4 的一年级学生。就像标题所说的那样，我试图在旋转木马周围环绕文本。我已经有点成功了，但是当滑动到下一个图像时，它真的很奇怪地将文本向下推。我真的不知道如何防止这种情况发生。
我没有使用 Bootstrap 中的列系统，因为我希望文本围绕轮播而不是在它旁边。使用浮动有效，但在滑动到下一个图像时它仍然将文本向下推。
无论如何，这是我的代码：
<main class="p-5 justify-content-center">
<a href="index.html" class="btn btn-info btn-lg">Zurück</a>
<div class="container-fluid">
<div class="float-right">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="imgs/mallorcaBild1.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="imgs/mallorcabild2.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="imgs/mallorcabild3.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<h1>Mallorca</h1>
<h3 class="text-secondary">Mallorca bietet wunderschöne Strände mit einem traumhaften türkisen Meer.
</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus
reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis
debitis quam ab nemo necessitatibus.</p>
</div>
</main>
答案 0 :(得分：0)
我通过给旋转木马一个自定义大小的容器解决了这个问题。这将使滑动动画停留在容器/轮播内。