小编use*_*063的帖子

循环通过bootstrap 3 jumbotron的背景图像

我试图让3个图像循环作为Bootstrap 3 jumbotron的背景.但问题是我在jumbotron中有3个div,到目前为止我尝试的所有解决方案都要求我将jumbotron的位置改为相对和背景图像为绝对.而且因为我试图保持网站的响应能力,所以这样做会严重影响较小规模的外观.

我还尝试通过使jumbotron绝对和旋转木马相对来将旋转木马放在旋转木马上.在较小的屏幕尺寸下再次出现相同的缩放问题.

是否有捷径可寻?

编辑:我希望我的背景改变类似于这个网站:http://www.in-toronto-web-design.ca/并让它也适当缩放.

我的代码:

 <!--begin jumbotron-top-->
<div class="jumbotron" id="jumbotron-top">
    <!--navigation bar-->
    <div class="row">
        <nav class="navbar navbar-default transparent" id="navbar-main">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="fa fa-chevron-down fa-2x"></span> <b>Menu</b>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="navCollapse">
                <ul class="nav nav-stacked main-nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <hr>
            </div>
        </nav>
    </div>
    <!--end nav bar-->

    <h1>Heading</h1>
    <div class="container">
        <p>Content</p>
        <a class="btn btn-lg btn-success fp-buttons" href="#"> …
Run Code Online (Sandbox Code Playgroud)

background-image twitter-bootstrap twitter-bootstrap-3

2
推荐指数
1
解决办法
2万
查看次数