Twitter Bootstrap Carousel导航显示

Question

我只是为一个简单的网络应用程序测试了一些Twitter Bootstrap的东西而且我遇到了Carousel的一个问题：导航按钮不像在bootstrap网站上的例子和我在网上找到的其他例子那样显示

我已采用此示例http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=carousel并将其放入此小提琴中http://jsfiddle.net/a5udW/

<div class="bs-example">
<div id="myCarousel" class="carousel slide">
    <!-- Carousel indicators -->
    <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>
    </ol>   
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">Slide 1</div>
        <div class="item">Slide 2</div>
        <div class="item">Slide 3</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"><</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">></a>
</div>

导航按钮只是简单的“＆lt;”和“＆gt;”在较大的矩形中，与Code Lab中的示例不同。

我做错了什么noob？

非常感谢。

Answer 1

看起来他们在演示中使用了以下引导样式表：

http://www.tutorialrepublic.com/examples/css/bootstrap.min.css

通过将其替换为小提琴中的那个，您将获得正确的程式化代码。

jsFiddle

---

普罗蒂普：

如果您想弄清楚某些内容是如何呈现的，只需使用Inspect Element，它会给您这样的内容：

从那里，您可以切换每个属性，以查看它们如何影响显示的实时演示。您可以复制CSS并将其扔进自己的小提琴中。或者您甚至可以查看每个部分的右上角以查看css的来源，右键单击，选择“复制链接地址”并获取整个样式表。这就是我回答这个问题的全部内容。现在你也可以！ ：）

---

更新

是的，此更改与2.x到3.0

的默认轮播外观有关

2.x Carousel - ＆gt;

3.0 Carousel - ＆gt;

如果您想使用 Twitter Bootstrap 3 ，但要设置像2.0这样的导航按钮，那么您可以使用常规样式表并应用以下 css ：

.carousel-control {
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    background: #222;
    border: 3px solid #fff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
    margin-top: -20px;   
}

New Fiddle