【问题标题】:Why is my Bootstrap Carousel not scaling?为什么我的 Bootstrap Carousel 没有缩放?
【发布时间】:2013-01-16 03:01:51
【问题描述】:

我已经查找了一些关于此的信息并找到了一些答案,但是当我将其应用于我的代码时,没有任何反应。当我调整窗口大小时,轮播不会调整大小,而是在右侧被切断。有关如何使其正确扩展的任何想法?

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Bootstrap -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('.carousel').carousel({
          interval: 3000
        });
    });
    </script>
  </head>

<body>
    <div class="container">
        <div id="myCarousel" class="carousel slide">
            <!-- Carousel items -->
            <div class="carousel-inner">
            <div class="active item"><img src="img/guy.png" alt="Wedge Tire"></div>
            <div class="item"><img src="img/front.png" alt="Wedge Tire"></div>
            <div class="item"><img src="img/fleet.png" alt="Wedge Tire"></div>
            <div class="item"><img src="img/inside.png" alt="Wedge Tire"></div>
            <div class="item"><img src="img/more_tires.png" alt="Wedge Tire"></div>
            <div class="item"><img src="img/tires.png" alt="Wedge Tire"></div>
            <div class="item"><img src="img/truck.png" alt="Wedge Tire"></div>
            <div class="item"><img src="img/trucks.png" alt="Wedge Tire"></div>
            <div class="item"><img src="img/warehouse.png" alt="Wedge Tire"></div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </div><!--CONTAINER-->
</body>
</html>

【问题讨论】:

  • head 中添加script 怎么样?
  • @RicardoLohmann 请你说得更具体些。
  • 我认为响应式引导 CSS 应该跟在主要 CSS 之后。不过不确定是不是这个问题。

标签: javascript html twitter-bootstrap carousel


【解决方案1】:

验证了我的上述评论。 &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt; 需要在 &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt; 之后。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-11-01
    • 1970-01-01
    • 2014-03-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-11
    • 2021-03-22
    相关资源
    最近更新 更多