Question

我正在尝试创建一个我们医院的游览，似乎无法让Bootstrap Carousel中的操作按钮正常运行。任何想法将不胜感激。以下是其中一个项目的标记。

要查看我们现在的内容（标题中的链接不可点击）http://www.lebonheur.org/about-le-bonheur/experience-le-bonheur/hospital/ground-floor.dot

<div class="item">
    <img src="/images/photos/experience-le-bonheur/hospital-first/First1.jpg">
    <span class="carousel-caption row-fluid">
       <div class="span9 caption">
         <p>Le Bonheur Children’s Hospital opened an entire new facility in 2010. Le Bonheur is designed to be energy efficient and socially responsible. Le Bonheur is the fifth LEED-certified children’s hospital in the U.S.</p> 
        </div>

        <div class="span3 action">
            <a class="btn btn-large pull-right" href="http://lebonheur.org/our-services/emergency-medicine/">Emergency Medicine</a>      
        </div>
    </span>

Answer 1

由于某种原因，引导CSS不允许在标题中添加额外的<div>。这样做会隐藏你内部的任何链接。

您必须考虑一种解决方法，以便将样式恢复到您想要的样式，但如果您删除这些额外的<div>标记，则链接将变为可点击。 e.g：

<div class="item">
  <img src="/images/photos/experience-le-bonheur/hospital-first/First1.jpg">
  <span class="carousel-caption row-fluid">
   **REMOVE THIS-> <div class="span9 caption">
     <p>Le Bonheur Children’s Hospital opened an entire new facility in 2010. Le Bonheur is designed to be energy efficient and socially responsible. Le Bonheur is the fifth LEED-certified children’s hospital in the U.S.</p> 
    **REMOVE THIS-> </div>

    ** REMOVE THIS-> <div class="span3 action">
        <a class="btn btn-large pull-right" href="http://lebonheur.org/our-services/emergency-medicine/">Emergency Medicine</a>      
    **REMOVE THIS-> </div>
  </span>

所以你的新标记看起来像这样：

<div class="item">
   <img src="/images/photos/experience-le-bonheur/hospital-first/First1.jpg"/>
   <span class="carousel-caption row-fluid">
      <p>Le Bonheur Children’s Hospital opened an entire new facility in 2010. Le Bonheur is designed to be energy efficient and socially responsible. Le Bonheur is the fifth LEED-certified children’s hospital in the U.S.</p> 
      <a class="btn btn-large pull-right" href="http://lebonheur.org/our-services/emergency-medicine/">Emergency Medicine</a>
   </span>
</div>

Answer 2

这是因为.carousel-indicators掩盖了字幕区域。可以使用颜色背景简单地验证指标因此，只需设置.carousel-indicators小于.carousel-caption区域的任何禁用高度值。

这解决了我的问题：

.carousel-indicators{ 
    height: 16px; 
}

Bootstrap Carousel - 标题中的链接

2 个答案: