1

我正在尝试参观我们的医院，但似乎无法让 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>

4

2 回答 2

1

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

您必须想出一种解决方法来使样式恢复为您想要的样式，但是如果您删除这些额外的<div>标签，那么链接就会变得可点击。例如：

<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>
于 2013-04-26T16:33:55.667 回答
0

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

这解决了我的问题：

.carousel-indicators{ 
    height: 16px; 
}
于 2016-12-12T19:06:49.490 回答