如何使用Bootstrap创建响应式轮播嵌入式卡？

Question

I was trying to create a Bootstrap card that has a 'slideshow' embedded. I want to use the other page to give more info about the first page. I was editing this on web and got to a fairly presentable product( https://gph.is/2NgOkWh ) however when I tried it on my phone it was completely broken.

I attached the main code, leaving out the library links and some other default information. Please let me know how I could correct this, I'd really appreciate it.

 <div class="row justify-content-center">
            <div class="col-sm-3">
                <div class="card text-white bg-dark mb-3" style="width: 18rem; height:24rem">
                    <div class="card-header text-muted">
                        App name
                    </div>
                    <div id="demo" class="carousel slide" data-ride="carousel">
                        <div class="card-body">
                            <!---------------------CARD BODY--------------------->
                            <!-- Indicators -->
                            <ul class="carousel-indicators">
                                <li data-target="#demo" data-slide-to="0" class="active"></li>
                                <li data-target="#demo" data-slide-to="1"></li>
                            </ul>


                            <!-- The slideshow -->
                            <div class="carousel-inner" style="height:15.2rem">

                                <div class="carousel-item active">
                                    <img class="card-img-top" src="sample.jpg"
                                         alt="Card image cap"
                                         id="sample">
                                    <h5 class="card-title">Title</h5>
                                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                    <p class="card-text">Hi quick example text to build on the card title and make up
                                        the bulk of the card's content.</p>

                                </div>

                                <div class="carousel-item">
                                    <h5 class="card-title">Card title</h5>
                                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                                    <p class="card-text">Some quick example text trewrwrwerwerwero build on the card
                                        title and make up
                                        the bulk of the card's content.</p>

                                </div>
                            </div>
                            <!---------------------CARD BODY END--------------------->

                        </div>
                    </div>
                    <div class="card-footer btn btn-primary">
                        Show me!
                    </div>
                </div>
            </div>
        </div>

Answer 1

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="row justify-content-center"> <div class="col-sm-3"> <div class="card text-white bg-dark mb-3" "> <div class="card-header text-muted"> App name </div> <div class="card-body"> <div id="demo" class="carousel slide" data-ride="carousel"> <!---------------------CARD BODY---------------------> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> </ul> <!-- The slideshow --> <div class="carousel-inner" > <div class="carousel-item active"> <img class="card-img-top" src="sample.jpg" alt="Card image cap" id="sample"> <h5 class="card-title">Title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Hi quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <div class="carousel-item"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text trewrwrwerwerwero build on the card title and make up the bulk of the card's content.</p> </div> <!---------------------CARD BODY END---------------------> </div> </div> <div class="card-footer btn btn-primary"> Show me! </div> </div> </div> </div>