Html 引导转盘-同一行中的2个转盘

我决定使用bootstrap carousel来显示一些项目的图片，但遗憾的是我在这方面遇到了一些问题。 我想在同一排有两个旋转木马，但这似乎是一个不可能完成的任务。 我曾尝试使用css，我给外部div一个100%的宽度，然后创建“内部div”，每个div的宽度为40%。 遗憾的是，这并不能解决问题

<div class="outterBound row">
                    <div class="insideSize">
                        <!-- This is the slideshow, all the css works and the pictures wont be too wide -->
                        <div id="myCarousel" class="carousel slide" data-ride="carousel" >
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                                <li data-target="#myCarousel" data-slide-to="3"></li>
                                <!-- remember to add the number of pictures here, else the idicator wont work! --> 
                            </ol>

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <div class="item active">
                                    <img  src="/img/sogo/Photo 26-05-16 15.52.38.png" alt="login">
                                </div>

                                <div class="item">
                                    <img src="/img/sogo/Photo 26-05-16 15.52.41.png" alt="frontPage">
                                </div>

                                <div class="item">
                                    <img src="/img/sogo/Photo 26-05-16 15.52.50.png" alt="updateProfile">
                                </div>

                                <div class="item">
                                    <img src="/img/sogo/Photo 26-05-16 15.53.10.png" alt="createAccount">
                                </div>

                                <!-- just add another "item" here if you want more pictures  -->
                            </div>
                            <!-- Left and right controls -->
                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>

                        </div>
                    </div>
                    <!-- slideshow ends here, you can add/remove pictures as you want to. -->


                    <div class="insideSize">
                        <div id="myCarousel" class="carousel slide" data-ride="carousel" >
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <!--<li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                            <li data-target="#myCarousel" data-slide-to="3"></li> -->
                            <!-- remember to add the number of pictures here, else the idicator wont work! -->
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img  src="/img/sogo/diverse/Billede1_1.jpg" alt="login">
                            </div>



                            <!-- just add another "item" here if you want more pictures  -->
                        </div>

                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <!-- slideshow ends here, you can add/remove pictures as you want to. -->
                </div>
            </div>

有什么想法吗？

---

这里有一个链接，您可以通过图片查看

尝试使用引导列

<div class="outterBound row">
    <div class="insideSize col-sm-6">
        First Carousel
    </div>
    <div class="insideSize col-sm-6">
        Second Carousel
    </div>
</div>

第一旋转木马
第二旋转木马

---

尽情使用ID，一个ID是唯一的，你不能有两个ID=“myCarousel”。更改每个转盘或use类的id。

尝试使用引导列

<div class="outterBound row">
    <div class="insideSize col-sm-6">
        First Carousel
    </div>
    <div class="insideSize col-sm-6">
        Second Carousel
    </div>
</div>

第一旋转木马
第二旋转木马

尽情使用ID，一个ID是唯一的，你不能有两个ID=“myCarousel”。更改每个转盘或使用类的id