Question

我正在尝试使用Bootstrap Twitter的旋转木马。当我将html直接放在我的.html文件中时，旋转木马的工作方式与我想的完全一样。但我正在尝试动态加载页面。当我加载它时，显示工作正常，只显示活动项目。这让我觉得Bootstrap 正在工作，但这些项目不会切换。

这个文件的工作方式与我想要的完全一样，但它只是在一个文件中，这不是我想要的：

index.html （Working JSFiddle）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Carousel</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
    <div class='carousel slide' data-ride='carousel'>
        <div class='carousel-inner' role='listbox'>
            <div class='item active'>
                <h1>First Horse</h1>
            </div>
            <div class='item'>
                <h1>Second Horse</h1>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

但是，当我尝试从外部文件加载内容时，它不起作用。初始显示仍然正确，但旋转木马运动不再存在。因此使用bootstrap的col类可以工作，但Bootstrap的carousel却没有。有谁知道为什么会这样？这是破碎的代码：

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Carousel</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<section id="test"></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="load-carousel.js"></script>
</body>
</html>

负载carousel.js

$('#test').load('carousel.html');

carousel.html

<div class='container'>
    <div class='carousel slide' data-ride='carousel'>
        <div class='carousel-inner' role='listbox'>
            <div class='item active'>
                <h1>First Horse</h1>
            </div>
            <div class='item'>
                <h1>Second Horse</h1>
            </div>
        </div>
    </div>
</div>

请注意carousel.html和工作index.html的主体是相同的。

有谁知道这个的原因？关于如何以Bootstrap的轮播工作方式加载页面的任何想法？

Answer 1

检测到您的轮播的bootstrap javascript正在页面上的轮播的html之前执行。您可以通过

手动初始化轮播

$('.carousel').carousel();

在运行时加载页面时，为什么Bootstrap在运行时没有工作？

1 个答案: