Кнопка «Узнать больше» не работает в моем коде html - PullRequest
0 голосов
/ 30 апреля 2020
image

Я старался изо всех сил, но кнопка "Узнать больше" не работает в <div class= "jumbotron">. В карусели работают три таких кнопки. Я использую bootstrap для создания сайта. Я думаю, что некоторые свойства перекрываются. Я использовал jumbotron отсюда https://getbootstrap.com/docs/4.4/components/jumbotron/. Я использовал карусель отсюда https://getbootstrap.com/docs/4.4/components/carousel/. Раньше проблем не было. Я не знаю, как появилась эта ошибка. Пожалуйста, предложите некоторые изменения.

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Проблема в том, что вы добавили элементы с классом jumbotron внутри элементов карусели. И это привело к тому, что элементы с классом jumbotron были помещены под элементы управления карусели . Я предлагаю изменить нижнюю часть элементов управления каруселью.

Чтобы устранить проблему, добавьте следующий скрипт:

<script>
    const computedStyle = window.getComputedStyle(document.getElementsByClassName('jumbotron')[0]);
    const bottomOfCarouselAction = +computedStyle.getPropertyValue('height').replace('px', '') + +computedStyle.getPropertyValue('margin-top').replace('px', '') + +computedStyle.getPropertyValue('margin-bottom').replace('px', '');
    document.getElementsByClassName('carousel-control-prev')[0].style.bottom = bottomOfCarouselAction;        //set the bottom property of carousel previous control to the top of the jumbotron. 
    document.getElementsByClassName('carousel-control-next')[0].style.bottom = bottomOfCarouselAction;        //set the bottom property of carousel next control to the top of the jumbotron. 
</script>
0 голосов
/ 30 апреля 2020

Так что проблема с файлами bootstrap, у вас нет файлов bootstrap 4, если вы добавили все ссылки и bootstrap ссылку на заголовок html, тогда это будет работать ,

Я как-то изменил код, чтобы у вас была идея. !!!

<!DOCTYPE html>
<html>

<head>
    <title>Index</title>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
        integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.4/getting-started/introduction">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
    <div class="jumbotron">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra
            attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger
            container.</p>
        <a class="btn btn-primary btn-lg" href="https://hubblesite.org/image/3725/gallery" role="button">Learn more</a>
    </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...