Question

我决定2使用bootstrap carousel来展示一些项目的照片，但遗憾的是我有一些问题。我想在同一排上放两个旋转木马，但这似乎是一个不可能完成的任务。我试图使用css，我给outter div一个100％的宽度，然后创建为“内部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>

这是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的链接，您可以通过图片查看。

Answer 1

尝试使用bootstrap列。

<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 =＆＃34; myCarousel＆＃34;。更改每个轮播的ID或使用类。

bootstrap carousel - 同一排的2个旋转木马

1 个答案: