我编码你可以在下面看到的内容。我面临的问题是我想引导旋转木马推下一个div。这似乎不是旋转木马图像背后的那些内容的一部分。之后我会将divs内容移动到我想要的位置。我是使用Bootstrap4的新手。我知道当我们使用bootstrap时,它手头有一些确定的偏好。但我找不到解决这个问题的方法。
HTML5:
<div id="container">
<div id="carouselExampleSlidesOnly" class="carousel slide" class="position-sticky" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="./IlCantoDeLamore/images/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="./IlCantoDeLamore/images/2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="./IlCantoDeLamore/images/3.jpg"ß alt="Third slide">
</div>
</div>
</div>
<div class="floatfix"></div>
<div class="media">
<h3>Share this page</h3>
<p><a href="#">Share on Facebook</a></p>
<p><a href="#">Share on Twitter</a></p>
<p><a href="#">Share on Google+</a></p>
</div>
<div class="media">
<h3>Create a website</h3>
<p>Everybody can create a website, it's easy</p>
<button>Try it for FREE now</button>
</div>
<h2>Italian food is a way of living</h2>
<p>"Simply THE BEST Italian restaurant outside Italy for me and my wife. We have had a chance to visit it twice during our trips and will do it for sure next time if possible. No matter what your choice is - you will not regret it and will like to go back ASAP!" ★★★★★ - Yelp</p>
<p>Welcome, and thanks for choosing this template, which is a wonderful canvas suitable for all kinds of restaurants.</p>
<p>You can easily make this template your own by replacing the content on this page.</p>
<p>For example, you can change the images and text with some of your own. It can be a little welcome message for your website visitors, or an introduction to your restaurant/café and the food you make.</p>
<p>You can also choose to delete all the content on this page and start from scratch. Don't worry: you can always add new content to the page by clicking the Add Content button. </p>
<p>Ready to work on another page? Just click on any of the pages in the menu above, or go to Pages.</p>
<p>Questions? Just click on the ? icon. This is our little help section, which gives you short explanations on all of the main features of the website editor.</p>
<p>Good luck, and we hope you have fun putting together your website!</p>
<p><strong>Benvenuto!</strong></p>
</div>
Css3:
#container {
background-color: white;
}
.carousel{
position: relative;
width: 600px;
height: 200px;
padding: 15px;
float: right;
}
.floatfix {
clear: left;
}