下一个div内容的Bootstrap轮播图像。下一个div内容的一部分是旋转木马img

时间:2017-11-02 09:11:15

标签: html5 css3 bootstrap-4

我编码你可以在下面看到的内容。我面临的问题是我想引导旋转木马推下一个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;
}

0 个答案:

没有答案