bootstrap carousel - 同一行中的 2 个轮播答案

【问题标题】：bootstrap carousel - 2 carousel in the same rowbootstrap carousel - 同一行中的 2 个轮播
【发布时间】：2017-08-08 01:16:54
【问题描述】：

我决定 2 使用引导轮播显示一些项目的一些图片，但遗憾的是我对此有一些问题。我想在同一排有 2 个旋转木马，但这似乎是一个不可能完成的任务。我尝试使用 css，我将外部 div 的宽度设置为 100%，然后创建为每个宽度为 40% 的“内部 div”。可悲的是，这并不能解决问题。

<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>

这是css文件：

@charset "UTF-8";

p{
    font-family: Garamond;
    font-size: 14px;
}


.font{
    font-family: Garamond;
    font-size: 14px;
}

.padding{
    padding-left: 15px;
}

.jumbotron p{
    font-family: Garamond;
    font-size: 16px;
} 
h4{
    align-items: left;
}

.carousel-inner>.item>img{margin:0; max-height: 70%;}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 40%
    margin: 0;
}

@media screen and (min-width: 1023px){
    div.outterBound{
        width: 100%;

    }
} 

@media screen and (min-width: 1023px){
div.insideSize{
    width: auto;
}
}

有什么想法吗？这是website 的链接，您可以通过图片查看。

【问题讨论】：

标签： html css twitter-bootstrap carousel

【解决方案1】：

尝试使用引导列。

<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。

【讨论】：