ブートストラップカルーセル - 同じ列の2台のカルーセル

Question

私はいくつかのプロジェクトの写真を表示するために2台のブートストラップカルーセルを使用することを決めましたが、残念ながら私はこれにいくつか問題があります。 同じ列に2つのカルーセルが必要ですが、これは不可能な使命のようです。 私は、アウトターdivに100％の幅を与え、次にそれぞれ40％の幅を持つ "inner divs"に作成したCSSを使用しようとしました。 悲しいことに、これで問題は解決しません。

<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

ブートストラップカラムを使用してください。

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

IDが一意である、あなたは2、ID = "myCarousel" を持つことができない、IDの使用とcarfulう。各カルーセルまたは使用クラスのIDを変更します。