iPhoneモックアップ内にブートストラップカルーセルを配置できません

Question

iPhoneモックアップ内にブートストラップカルーセルを配置することができません。モックアップ内の左側に配置されています。私はこれまでのところ成功していないさまざまなアプローチを試みました。すべての助けを

Webpage with the problem.

感謝。

HTMLコード：.carousel-item.activeについては

header.masthead { 
 
    position: relative; 
 
    overflow-y: hidden; 
 
    width: 100%; 
 
    min-height: auto; 
 
    color: white; 
 
    background: url("../img/bg-pattern.png"), #00879b; 
 
    background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to right, #185a9d, #43cea2); 
 
    background: url("../img/bg-pattern.png"), linear-gradient(to right, #185a9d, #43cea2); } 
 

 
    header.masthead .header-content { 
 
    position: relative; 
 
    padding: 150px 0 50px; 
 
    text-align: center; } 
 
    header.masthead .header-content .header-content-inner { 
 
     position: relative; 
 
     max-width: 500px; 
 
     margin: 0 auto; } 
 
     header.masthead .header-content .header-content-inner h1 { 
 
     font-size: 30px; 
 
     margin-top: 0; 
 
     margin-bottom: 30px; } 
 
     header.masthead .header-content .header-content-inner .list-badges { 
 
     margin-bottom: 25px; } 
 
     header.masthead .header-content .header-content-inner .list-badges img { 
 
      height: 50px; 
 
      margin-bottom: 25px; } 
 
    header.masthead .device-container { 
 
    max-width: 300px; 
 
    margin: 0 auto 100px; } 
 
    header.masthead .device-container .screen img { 
 
     border-radius: 3px;} 
 
    @media (min-width: 768px) { 
 
    header.masthead { 
 
     min-height: 100%; } 
 
     header.masthead .header-content { 
 
     height: 100vh; 
 
     min-height: 600px; 
 
     padding: 0; 
 
     text-align: left; } 
 
     header.masthead .header-content .header-content-inner { 
 
      position: absolute; 
 
      top: 50%; 
 
      max-width: none; 
 
      margin: 0; 
 
      transform: translateY(-50%); } 
 
      header.masthead .header-content .header-content-inner h1 { 
 
      font-size: 35px; } 
 
     header.masthead .device-container { 
 
     max-width: none; 
 
     max-height: calc(100vh - 100px); 
 
     margin: 100px auto 0; } } 
 
    @media (min-width: 992px) { 
 
    header.masthead .header-content .header-content-inner h1 { 
 
     font-size: 50px; } } 
 

 
section.download { 
 
    position: relative; 
 
    padding: 150px 0; } 
 
    section.download h2 { 
 
    font-size: 50px; 
 
    margin-top: 0; } 
 
    section.download .badges .badge-link { 
 
    display: block; 
 
    margin-bottom: 25px; } 
 
    section.download .badges .badge-link:last-child { 
 
     margin-bottom: 0; } 
 
    section.download .badges .badge-link img { 
 
     height: 60px; } 
 
    @media (min-width: 768px) { 
 
     section.download .badges .badge-link { 
 
     display: inline-block; 
 
     margin-bottom: 0; } } 
 
    @media (min-width: 768px) { 
 
    section.download h2 { 
 
     font-size: 70px; } } 
 

 
section.features .section-heading { 
 
    margin-bottom: 100px; } 
 
    section.features .section-heading h2 { 
 
    margin-top: 0; } 
 
    section.features .section-heading p { 
 
    margin-bottom: 0; } 
 

 
section.features .device-container, 
 
section.features .feature-item { 
 
    max-width: 300px; 
 
    margin: 0 auto; } 
 

 
section.features .device-container { 
 
    margin-bottom: 100px; } 
 
    @media (min-width: 992px) { 
 
    section.features .device-container { 
 
     margin-bottom: 0; } } 
 

 
section.features .feature-item { 
 
    margin-bottom: 100px; 
 
    text-align: center; } 
 
    section.features .feature-item h3 { 
 
    font-size: 30px; } 
 
    section.features .feature-item i { 
 
    font-size: 80px; 
 
    background: #43cea2; /* fallback for old browsers */ 
 
    background: -webkit-linear-gradient(to left, #185a9d, #43cea2); /* Chrome 10-25, Safari 5.1-6 */ 
 
    background: linear-gradient(to left, #185a9d, #43cea2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 
 

 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; }

<div class="col-sm-5"> 
 
        <div class="device-container"> 
 
         <div class="device-mockup iphone6 portrait white"> 
 
          <div class="device"> 
 
           <div class="screen"> 
 
            <!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! --> 
 
            <div id="carousel-device-mockup" class="carousel slide" data-ride="carousel"> 
 
             <!-- Wrapper for slides --> 
 
             <div class="carousel-inner" role="listbox"> 
 
              <div class="carousel-item active"> 
 
               <div class="screen"> 
 
               <img src="img/menu.png" alt="1" class="img-fluid"> 
 
               </div> 
 
              </div> 
 
              <div class="carousel-item"> 
 
               <div class="screen"> 
 
               <img src="img/order.png" alt="2" class="img-fluid"> 
 
               </div> 
 
              </div> 
 
             </div> 
 
            </div> 
 
            <!-- <img src="img/Order_Details.png" class="img-fluid" alt=""> --> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div>

Answer 1

、ディスプレイのように変更します。代わりにフレックスのブロック、および.imgの流体のために、最大幅を：なし;幅：100％;これで問題は解決します。