Question

我一般都对bootstrap /编程html很新，因为这是一个新的爱好。我很难正确使用旋转木马，下一个问题应该花费几秒钟给我猜的任何人，但是我已经弄乱了一个小时的代码，我仍然无法找到原因...

我在bootstrap的网站上复制/粘贴了给定的代码，并用适当的项填充了字段（对于bg img使用.svg，以不同方式命名id，但也更改了所有其他ID）。也许有人可以告诉我为什么指标/ img不合适。即：指标位于左上角，就像任何其他有序列表项目符号和img显示在它们下面一样。

in head there is
<script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>


---    


<div class="container">                 
                                                    <!--    CAROUSEL -->
<div id="mon-carousel" class="carousel slide" data-ride="carousel" style="width: 450; height: 250; margin-left: auto; margin-right: auto;>
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#mon-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#mon-carousel" data-slide-to="1"></li>
    <li data-target="#mon-carousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides  -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
      <div class="carousel-caption">
        <h3>TEST CAPTION 1</h3>
        <p>test</p>
      </div>
    </div>
    <div class="item">
      <img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
      <div class="carousel-caption">
        <h3>TEST CAPTION 2</h3>
        <p>test</p>
      </div>
    </div>
    <div class="item">
      <img src="img/solid-black.svg" alt="fond-gris" style="width: 450; height: 250;">
      <div class="carousel-caption">
        <h3>TEST CAPTION 2</h3>
        <p>test</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#mon-carousel" 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="#mon-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
                                                    <!-- CAROUSEL   -->
</div>

Answer 1

您的网页很可能缺少必需的引导程序文件。

将此行添加到<head>....</head>部分：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

在jQuery脚本行下面的这一行：

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Answer 2

我意识到，当我在旋转木马的div中使用样式时，它就是问题的根源......我想我必须找到另一种方法来调整旋转木马的大小。

Bootstrap 3轮播img /指示灯未正确显示

2 个答案: