引导轮播指示器不可点击

时间：2018-12-18 16:00:25

标签： html css bootstrap-4 carousel

我似乎无法弄清楚为什么轮播指标无法像我所看到的Boostrap 4轮播示例中那样被点击。从我所看到的情况来看，此功能应该不需要任何额外的代码就可以工作，而我的却没有。我看不到我做错了什么，因为我所做的只是从Boostrap文档中复制轮播，然后添加一些内容。我希望有可点击的文本作为每张幻灯片的指示器。我做错了什么？

.carousel-indicators {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section class="drinks_menu">
  <div class="container">
    <div id="drinks_carousel" class="slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#drinks_carousel" data-slide-to="0" class="active">HOT DRINKS</li>
        <li data-target="#drinks_carousel" data-slide-to="1">SOFT DRINKS</li>
        <li data-target="#drinks_carousel" data-slide-to="2">BEER</li>
        <li data-target="#drinks_carousel" data-slide-to="3">WINE</li>
        <li data-target="#drinks_carousel" data-slide-to="4">SPIRITS</li>
      </ul>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">HOT DRINKS</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list">
              <li>Espresso <span>£1.80</span></li>
              <li>Espresso macchiato <span>£1.90</span></li>
              <li>Tea - peppermint / green / camomile / earl grey&nbsp;/&nbsp;yorkshire <span>£1.90</span></li>
              <li>Americano <span>£2.00</span></li>
              <li>Caffe latte <span>£2.40</span></li>
            </ul>
            <ul class="menu_list">
              <li>Flat white <span>£2.60</span></li>
              <li>Cappucino <span>£2.40</span></li>
              <li>Mocha <span>£2.60</span></li>
              <li>Hot chocolate <span>£2.40</span></li>
            </ul>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">SOFT DRINKS</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list">
              <li>San pellegrino cans – blood orange / limonata/ orange&nbsp;&nbsp;pomegranate<span>£1.80</span></li>
              <li>Harrogate spring still&nbsp;water <span>£1.40</span></li>
              <li>Smeraldina sparkling water<span>£2.00</span></li>
            </ul>
            <ul class="menu_list">
              <li>Fresh juice – orange&nbsp;/&nbsp;apple <span>£1.80</span></li>
              <li>Coca cola / sprite <span>£1.50</span></li>
            </ul>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">BEER</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list full">
              <li>Draught – birra&nbsp;moretti <span>½ pint £2.20</span>span> <span>Pint £4.40</span></li>
              <li>Speciality birra&nbsp;moretti<span>toscana £4.80</span> <span>siciliana £4.80</span></li>
            </ul>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">WINE</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list">
              <li class="section_title">House</li>
              <li>Tenuta san marco white&nbsp;/&nbsp;red<span>125ML £2.75</span> <span>250ML £5.50</span> <span>500ML carafe £11.00</span></li>

              <li class="section_title">Red</li>
              <li>Malbec- El Finatello;&nbsp;Chile <span>250ML £6.50</span> <span>Bottle £19.50</span></li>
              <li>Chianti D.O.C. - Vernaiolo;&nbsp;Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
            </ul>
            <ul class="menu_list">
              <li class="section_title">White</li>
              <li>Gavi Di Gavi – conti speroni;&nbsp;Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
              <li>Sauvignon Blanc- Clifford Quay; New&nbsp;Zealand <span>250ML £7.50</span> <span>Bottle £22.00</span></li>
              <li class="section_title">Rose</li>
              <li>Pinot Grigio Rose – Villa Serena;&nbsp;Italy <span>250ML £6.50</span> <span>Bottle £19.50</span> </li>
            </ul>
            <ul class="menu_list">
              <li class="section_title">Prosecco</li>
              <li>Miol D.O.C. Treviso&nbsp;–&nbsp;Italy <span>125ML £6.00</span> <span>Bottle £24.00</span></li>
            </ul>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">SPIRITS</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list">
              <li>Aperol Spritz <span>£6.90</span></li>
              <li>Grappa Invecchiata<span>£3.50</span></li>
            </ul>
            <ul class="menu_list">
              <li>Limoncello <span>£3.50</span></li>
              <li>Malfy Gin & Fever Tree Tonic – Sicilian bloody orange / Sicilian pink grapefruit / Limone&nbsp;/&nbsp;Originale <span>£6.50</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1 个答案:

答案 0 :(得分：2)

您缺少的是这个<div id="drinks_carousel" class="carousel slide" data-ride="carousel"> div中缺少carousel类。签出this。

.carousel-indicators {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section class="drinks_menu">
  <div class="container">
    <div id="drinks_carousel" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#drinks_carousel" data-slide-to="0" class="active">HOT DRINKS</li>
        <li data-target="#drinks_carousel" data-slide-to="1">SOFT DRINKS</li>
        <li data-target="#drinks_carousel" data-slide-to="2">BEER</li>
        <li data-target="#drinks_carousel" data-slide-to="3">WINE</li>
        <li data-target="#drinks_carousel" data-slide-to="4">SPIRITS</li>
      </ul>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">HOT DRINKS</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list">
              <li>Espresso <span>£1.80</span></li>
              <li>Espresso macchiato <span>£1.90</span></li>
              <li>Tea - peppermint / green / camomile / earl grey&nbsp;/&nbsp;yorkshire <span>£1.90</span></li>
              <li>Americano <span>£2.00</span></li>
              <li>Caffe latte <span>£2.40</span></li>
            </ul>
            <ul class="menu_list">
              <li>Flat white <span>£2.60</span></li>
              <li>Cappucino <span>£2.40</span></li>
              <li>Mocha <span>£2.60</span></li>
              <li>Hot chocolate <span>£2.40</span></li>
            </ul>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">SOFT DRINKS</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list">
              <li>San pellegrino cans – blood orange / limonata/ orange&nbsp;&nbsp;pomegranate<span>£1.80</span></li>
              <li>Harrogate spring still&nbsp;water <span>£1.40</span></li>
              <li>Smeraldina sparkling water<span>£2.00</span></li>
            </ul>
            <ul class="menu_list">
              <li>Fresh juice – orange&nbsp;/&nbsp;apple <span>£1.80</span></li>
              <li>Coca cola / sprite <span>£1.50</span></li>
            </ul>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">BEER</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list full">
              <li>Draught – birra&nbsp;moretti <span>½ pint £2.20</span>span> <span>Pint £4.40</span></li>
              <li>Speciality birra&nbsp;moretti<span>toscana £4.80</span> <span>siciliana £4.80</span></li>
            </ul>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">WINE</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list">
              <li class="section_title">House</li>
              <li>Tenuta san marco white&nbsp;/&nbsp;red<span>125ML £2.75</span> <span>250ML £5.50</span> <span>500ML carafe £11.00</span></li>

              <li class="section_title">Red</li>
              <li>Malbec- El Finatello;&nbsp;Chile <span>250ML £6.50</span> <span>Bottle £19.50</span></li>
              <li>Chianti D.O.C. - Vernaiolo;&nbsp;Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
            </ul>
            <ul class="menu_list">
              <li class="section_title">White</li>
              <li>Gavi Di Gavi – conti speroni;&nbsp;Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
              <li>Sauvignon Blanc- Clifford Quay; New&nbsp;Zealand <span>250ML £7.50</span> <span>Bottle £22.00</span></li>
              <li class="section_title">Rose</li>
              <li>Pinot Grigio Rose – Villa Serena;&nbsp;Italy <span>250ML £6.50</span> <span>Bottle £19.50</span> </li>
            </ul>
            <ul class="menu_list">
              <li class="section_title">Prosecco</li>
              <li>Miol D.O.C. Treviso&nbsp;–&nbsp;Italy <span>125ML £6.00</span> <span>Bottle £24.00</span></li>
            </ul>
          </div>
        </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-12">
              <h2 class="heading">SPIRITS</h2>
            </div>
          </div>
          <div class="row">
            <ul class="menu_list">
              <li>Aperol Spritz <span>£6.90</span></li>
              <li>Grappa Invecchiata<span>£3.50</span></li>
            </ul>
            <ul class="menu_list">
              <li>Limoncello <span>£3.50</span></li>
              <li>Malfy Gin & Fever Tree Tonic – Sicilian bloody orange / Sicilian pink grapefruit / Limone&nbsp;/&nbsp;Originale <span>£6.50</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

相关问题
最新问题