Карусель Bootstrap - Ссылка в подписи

62
7

Я пытаюсь создать тур по нашей больнице и, похоже, не могу заставить кнопки вызова в кассете Bootstrap правильно функционировать. Любые мысли были бы весьма признательны. Ниже приведена разметка одного из предметов.

Чтобы узнать, что у нас сейчас (ссылки в подписях не доступны) 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 Childrens 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 childrens 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>

спросил(а) 2021-01-19T17:28:59+03:00 3 месяца, 2 недели назад
1
Решение
62

По какой-то причине bootstrap 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 Childrens 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 childrens 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 Childrens 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 childrens 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>

ответил(а) 2021-01-19T17:28:59+03:00 3 месяца, 2 недели назад
44

Это связано с тем, что .carousel-indicators маскируют область заголовка. Его можно просто проверить, используя цвет фона для индикаторов.
Таким образом, просто установите любое значение высоты .carousel-indicators для .carousel-indicators .carousel-caption меньше, чем область .carousel-caption.

Это решает проблему для меня:

.carousel-indicators{ 
height: 16px;
}

ответил(а) 2021-01-19T17:28:59+03:00 3 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема