Question

我写了一个简单的网页进行实验：这是代码：

<!doctype html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-default">
                    <!-- <div class="navbar-header"></div> -->
                    <center>Menu Bar!</center>
                </nav>
            </div>
            <div class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="./imgs/index.jpeg" alt="Chania">
                    </div>

                    <div class="item">
                        <img src="./imgs/index1.jpeg" alt="Chania">
                    </div>

                    <div class="item">
                        <img src="./imgs/index2.jpeg" alt="Flower">
                    </div>

                    <div class="item">
                        <img src="./imgs/index3.jpeg" alt="Flower">
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <div class="container">
            <div class="row">
                <div class="col-xs-4">
                    <div class="well"></div>
                </div>
                <div class="col-xs-4">
                    <div class="well"></div>
                </div>
                <div class="col-xs-4">
                    <div class="well"></div>
                </div>
            </div>
            </div>
            <div class="col-xs-12">
                    <div class="well"></div>
            </div>
        </div>
        <nav class="footer">
            <nav class="container">
                Footer!!
            </nav>
        </nav>
    </body>
</html>

网页是这样的：

页脚没有正常运行。转盘无法正常工作。但页面响应并在各种屏幕中正确加载。我该如何解决？

Answer 1

确保您的图像可以找到。仅凭外观，您的代码似乎能够找到index.jpeg而不是其他任何一个。尝试使用index.jpeg 4次，看看是否有帮助。

<div class="item active">
    <img src="./imgs/index.jpeg" alt="Chania">
</div>

<div class="item">
    <img src="./imgs/index.jpeg" alt="Chania">
</div>

<div class="item">
    <img src="./imgs/index.jpeg" alt="Flower">
</div>

<div class="item">
    <img src="./imgs/index.jpeg" alt="Flower">
</div>

布局搞砸了布局

1 个答案: