Question

<div class="container text-center">
  <h2>THE BAND</h2>
  <p>This is real music</p>
  <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
  <br>
  <div class="row">
    <div class="col-md-4">
      <h3><strong>Harry Potter</strong></h3>
      <br>
      <a href="#demo1" data-toggle: "collapse">
        <img src="../images/hp/daniel-radcliffe-robin-geeks-and-cleats.jpg" class="img-responsive img-circle">
      </a>
      <div id="demo1" class="collapse">
        <p>Lead singer</p>
        <p>Unfailingly kind</p>
        <p>Pormotes marijuana usage</p>
      </div>
    </div>
    <div class="col-md-4">
      <h3><strong>Hermione Granger</strong></h3>
      <br>
      <a href="#demo2" data-toggle: "collapse">
        <img src="../images/hp/bling-ring-emma-watson-tongue-6-new.jpg" class="img-responsive img-circle">
      </a>
      <div id="demo2" class="collapse">
        <p>Drummer</p>
        <p>"Its Levi-oh-saa"</p>
        <p>10000 points to Gryffindor</p>
      </div>
    </div>
    <div class="col-md-4">
      <h3><strong>Ron Weasley</strong></h3>
      <br>
      <a href="#demo3" data-toggle: "collapse">
        <img src="../images/hp/tumblr_naudtjccYH1r81hh2o2_1280.jpg" class="img-responsive img-circle">
      </a>
      <div id="demo3" class="collapse">
        <p>Kinda useless</p>
        <p>Afraid of spiders</p>
        <p>Uhm</p>
      </div>
    </div>
  </div>
</div>

单击图像时，折叠功能不起作用。当我使用“.in”课时，我可以看到文字。

当用户点击图像时，文本应显示在图像下方。我无法理解这个问题是什么。

Answer 1

您只需将data-toggle:"collapse"更改为data-toggle="collapse"即可。见Collapse.js

工作示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container text-center">
  <h2>THE BAND</h2>
  <p>This is real music</p>
  <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah</p>

  <br>

  <div class="row">

    <div class="col-md-4">
      <h3><strong>Harry Potter</strong></h3>
      <br>
      <a href="#demo1" data-toggle="collapse">
        <img src="http://placehold.it/350x150" class="img-responsive img-circle">
      </a>
      <div id="demo1" class="collapse">
        <p>Lead singer</p>
        <p>Unfailingly kind</p>
        <p>Pormotes marijuana usage</p>
      </div>
    </div>

    <div class="col-md-4">
      <h3><strong>Hermione Granger</strong></h3>
      <br>
      <a href="#demo2" data-toggle="collapse">
        <img src="http://placehold.it/350x150" class="img-responsive img-circle">
      </a>
      <div id="demo2" class="collapse">
        <p>Drummer</p>
        <p>"Its Levi-oh-saa"</p>
        <p>10000 points to Gryffindor</p>
      </div>
    </div>

    <div class="col-md-4">
      <h3><strong>Ron Weasley</strong></h3>
      <br>
      <a href="#demo3" data-toggle="collapse">
        <img src="http://placehold.it/350x150" class="img-responsive img-circle">
      </a>
      <div id="demo3" class="collapse">
        <p>Kinda useless</p>
        <p>Afraid of spiders</p>
        <p>Uhm</p>
      </div>
    </div>

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap图像链接崩溃无法正常工作

1 个答案: