Bootstrap 4轮播控件未出现

时间:2018-06-25 11:53:56

标签: twitter-bootstrap

Bootstrap 4传送带出现问题。它实际上按应有的方式工作,只是不会显示上一个/下一个图标。我已经查询了以下内容:

-glyphicons不再受支持

尝试在div“ carousel-inner”内部放置控件

尝试将z-index应用于控件

-尝试在CSS中更改图像大小和图标颜色

我的代码看起来就像Bootstrap文档以及我查找的所有示例。请帮忙!预先感谢。

当前显示的

页(显然还没有完成)https://cdn.rawgit.com/Cookrp924/My-Portfolio/9c48827b/Job%20Portfolio.html

有问题的代码

<div class="container">
    <h1>About Me</h1>
    <div class="row">
        <div class="col-lg-7">
            <h5>I am currently living in Raleigh, NC right next to the Research Triangle Park area. Through several friends and colleagues, I developed an interest in learning how to code and have been expanding my knowledge ever since. My resources include Free Code Camp, Colt Steele's "Web Developer Bootcamp", Codecademy, Stack Overflow and of course Google.</h5>
            <h5>I am currently open to new opportunities. Please contact me at: emailhere.com</h5>
        </div>
        <div class="col-lg-5">
            <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/19990238_1802039519806266_6452049826481461127_n.jpg?oh=5192b5fe6276a7df8be03aa31254cae6&oe=5B367A91" id="aboutmePic">
        </div>
    </div>
</div>


<div class="container">
    <h1>Skills</h1>
    <div class="row">
        <div class="col-lg-12">
            <h3>My skillset currently includes JavaScript, HTML, and CSS. I also utilize frameworks and libraries such as Bootstrap and jQuery. I always strive to create projects that are not only functional but also work reliably and have simple, easy to navigate user interfaces.</h3>
        </div>
        <div class="col-lg-1"></div>
        <div class="col-lg-4">
            <i class="devicon-javascript-plain colored"></i>
            <i class="devicon-html5-plain-wordmark colored"></i>
            <i class="devicon-css3-plain-wordmark colored"></i>
            <i class="devicon-bootstrap-plain-wordmark colored"></i>
            <i class="devicon-jquery-plain-wordmark colored"></i>
        </div>
    </div>
</div>

<div class="container">
    <h1>Projects</h1>
    <div class="carousel slide" id="projectCarousel">
        <ol class="carousel-indicators">
            <li data-target="#projectCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#projectCarousel" data-slide-to="1"></li>
            <li data-target="#projectCarousel" data-slide-to="2"></li>
            <li data-target="#projectCarousel" data-slide-to="3"></li>
            <li data-target="#projectCarousel" data-slide-to="4"></li>
        </ol>

        <div class="carousel-inner">
            <div class="carousel-item active">
                <a href="https://cdn.rawgit.com/Cookrp924/Quote-Generator/cff1b444/QuoteGenerator.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41815477-17a21464-773a-11e8-8bf7-c2748cd13075.png"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Wikipedia-Viewer/cd5e1683/Wiki.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41825874-c749c87c-77f2-11e8-9de6-58b48b1ca5fb.jpeg"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Local-Weather-App/37555f33/LocalWeather.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41827757-449b5a28-77ff-11e8-9e44-e37f8b6cd093.png"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Tic-Tac-Toe/99e0b7f2/Tic-Tac-Toe.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41844177-647fe7d0-783d-11e8-88d7-4251b81a591d.png"></a>
            </div>
            <div class="carousel-item">
                <a href="https://cdn.rawgit.com/Cookrp924/Simon/4a4c0ea8/Simon.html"><img class="d-block w-100" src="https://user-images.githubusercontent.com/34467782/41844777-43195570-783f-11e8-88ed-8bf0c40c7419.png"></a>
            </div>
        </div>
        <a class="carousel-control-prev" href="#projectCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#projectCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

3 个答案:

答案 0 :(得分:1)

您实际上是在隐藏prevnext图标。如下更新代码。

<a class="carousel-control-prev" href="#projectCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#projectCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon"></span>
</a>

Fiddle DEMO

答案 1 :(得分:0)

我尝试过,但是箭头仍然没有显示。这是我目前的代码。如果有人可以请我尽快回来,我将不胜感激。

<head>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Deganis on Wheels</title>

    <style>
        .carousel img{
            max-height: 450px;
        }
    </style>

</head>

<body>

    <nav class="nav nav-pills nav-fill">

        <a class="nav-item nav-link active" href="C:\Users\ohdeg\Documents\Family website.html">Home</a>

        <a class="nav-item nav-link" href="C:\Users\ohdeg\Documents\Family\Family Website Map Page.html">Map</a>

        <a class="nav-item nav-link" href="C:\Users\ohdeg\Documents\Family\Family website Facts.html">Facts</a>

        <a class="nav-item nav-link" href="C:\Users\ohdeg\Documents\Family\Family website Journal.html">Journal</a>

        <a class="nav-item nav-link" href="C:\Users\ohdeg\Documents\Family\Family Website Videos.html">Videos</a>

    </nav>

    <center>
        <h1 class="mt-3">
            Deganis on Wheels
        </h1>

    <div id="carouselExampleControl" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://scontent.fdub3-1.fna.fbcdn.net/v/t1.0-9/69250540_10157516532942838_2757624069254807552_n.jpg?_nc_cat=107&_nc_oc=AQkuXrUeviY6CXoQkPxGem-bnVVa0UbQZOX5ErsQLekyjvWsaQFUE2MPwQJCDY0tsEw&_nc_ht=scontent.fdub3-1.fna&oh=cfed540908f484393112c64a69edbbed&oe=5E0FD771" class = "" alt="">

            </div>

            <div class="carousel-item">
                <img src="https://scontent.fdub3-1.fna.fbcdn.net/v/t1.0-9/68547946_10157516532207838_5519242750152671232_n.jpg?_nc_cat=109&_nc_oc=AQmqaeIU-05SDz6t8-ls6w90x1WTn5RX6CLIa1hJQ_A77XYJKjM68cTQyoHoxyC0z9Y&_nc_ht=scontent.fdub3-1.fna&oh=13afc36f27fe9bbcfb0d6deb0be08dea&oe=5E10D6A5" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

            <div class="carousel-item">
                <img src="" alt="">

            </div>

        </div>

        <a class="carousel-control-prev" href="#carouselExampleControl" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon">Previous</span>
        </a>

        <a class="carousel-control-next" href="#carouselExampleControl" role="button" data-slide="next">
          <span class="carousel-control-next-icon">Next</span>
        </a>

    </div>

    </center>

</body>

答案 2 :(得分:0)

这对我有用:

 tripsDetailsViewModel.getUsersBriefs(participants.map { x -> x.userId }).observe(this, Observer{ users ->
     view?.post { userBriefAdapter.setData(users) }
})