Bootstrap全屏旋轉木馬

Question

我無法讓旋轉木馬在全屏幕中正常顯示。

當我向.fullscrn類中添加fixed位置時，傳送帶看起來不錯，但只要屏幕縮小，傳送帶就會失去響應能力。

當我不包括固定位置，頁面結束了大約300像素滾動

下面的代碼的bootply的。

我參考this後。

<div class="row no-pad"> 
    <div id="bg-slide-carousel" class="carousel slide carousel-slide col-md-12 no-pad fullscrn " 
     data-ride="carousel"> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner fullscrn"> 
      <div class="item active fullscrn"> 
       <div class="slide1 slides"><img src="" class="fullscrn"></div> 
      </div> 
      <div class="item fullscrn"> 
       <div class="slide2 slides"><img src="" class="fullscrn" alt=""/></div> 
      </div> 
      <div class="item fullscrn"> 
       <div class="slide3 slides"><img src="" class="fullscrn" alt=""/></div> 
      </div> 
     </div> 
     <!-- .carousel-inner --> 
     <div class="container carousel-overlay text-center"> 
      <div class=" col-md-12"> 
       <div class="center"> 
        <p class=" text-capitalize introParagraph ">Whats your home worth?</p> 

        <p class="text-capitalize " id="introParagraph2 ">Get sold information for homes like yours 
         right now!</p> 
       </div> 
       <div class="col-xs-10 col-md-12 col-xs-offset-2 "> 
        <div class="row" id="input-row"> 
         <div class=" col-xs-12"> 
          <form id="addressForm" name="" method="POST" 
            action="email.php" class="col-md-10 "> 
           <div class="input-append col-md-10 nf" id="fieldWrapper "> 
            <input id="searchTextField" type="text" name="address" 
              class="request-input col-md-5 col-xs-pull-7 col-sm-push-1 values address search-query" 
              placeholder="Enter Your Home Address"> 
            <input type="text" class="values col-md-2 col-xs-pull-7 col-md-push-1" id="unit" 
              placeholder="Unit #"> 
            <input type="hidden" name="type" id="changetype-all" checked="checked"> 
            <input type="hidden" name="city_image" id="city_image" value=""> 
            <input type="hidden" name="lat" id="lat"> 
            <input type="hidden" name="lng" id="lng"> 
            <input type="hidden" name="submit" id="submit"> 
            <button type="submit" name="next" 
              class="btn btn-success worth col-xs-3 col-xs-pull-2 col-md-push-1" 
              id="next"> Submit 
            </button> 
           </div> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 



body { 
     color: #f6f6ff; 
     font-family: 'Raleway', sans-serif; 
     font-weight: 200; 

    } 

input { 
    color: #000; 
} 

select { 
    color: #000; 
} 

option { 
    color: #000; 
} 
.container{ 
    margin: 0 auto; 
} 
.container_bottom { 
    margin: 0 auto; 
    max-width: 900px; 
} 

.containerPageTwo{ 
    background-color: green; 
    min-height: 720px; 
} 


p { 
    font-size: inherit; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 100; 
} 



h1, h2 { 
    font-family: 'Raleway', sans-serif; 
    text-align: center; 
    font-size: 28px; 
    font-weight: 300; 
    text-shadow: 2px 2px #ff000; 
    color: #fff; 
} 


/* Input Box */ 

.values { 
    font-size: 1.3em; 
    font-family: arial, sans-serif; 
} 

#input-row { 
    margin: 0 auto; 

} 

.center{ 
    display: block; 
} 
.address,.email{ 
    width:250px; 
} 
.address, #unit { 
    color: blue; 
} 

.address, #unit, .worth,.email { 
    margin-top: 10px; 
    height: 45px; 
    box-shadow: 2px 2px 14px #000000; 
    border-radius: 6px; 
    margin-left: 20px; 

} 

.worth,{ 
    letter-spacing: 1px; 
    width: 130px; 

} 



.phone { 
    width: 200px; 
    height: 420px; 
    background-color: #245269; 
    position: relative; 
} 

.search-query { 
    color: black; 
} 



/********************** 
    IMAGE CONTROLS 
***********************/ 
.slide1, .slide2, .slide3 { 



} 

/*.slide1 { 
    background-image: url('../img/Rosedale-pool-compressor.jpg'); 
}*/ 

/*.slide2 { 
    background-image: url('../img/tarrytown-compressor.jpg'); 
} 

.slide3 { 
    background-image: url('/img/s2-compressor.jpg'); 
} 
*/ 
.slides { 

    margin: auto; 
    display: block; 

    /* BLUR FILTER ADJUSTMENTS */ 
    filter: blur(3px); 
    -webkit-filter: blur(3px); 
    -moz-filter: blur(3px); 
    -o-filter: blur(3px); 
    -ms-filter: blur(3px); 

    /* COLOR ENHANCEMENT ADJUSTMENTS */ 
    -webkit-filter: grayscale(92%); 
    -moz-filter: grayscale(92%); 
    -o-filter: grayscale(92%); 
} 

/************************ 
Carousel Fade Effect 
************************/ 
.carousel.carousel-slide .item { 
    -webkit-transition: opacity 1s linear; 
    -moz-transition: opacity 1s linear; 
    -ms-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
    transition: opacity 1s linear; 
    opacity: .5; 
    margin-bottom: 30px; 
} 

.carousel.carousel-slide .active.item { 

    opacity: 1; 
} 

.carousel.carousel-slide .active.left, 
.carousel.carousel-slide .active.right { 
    left: 0; 
    z-index: 2; 
    opacity: 1; 
    filter: alpha(opacity=0); 
    height: 80%; 
} 

/* Carousel Overlay */ 
.carousel-overlay { 
    position: fixed; 
    bottom: 250px; 
    right: 0; 
    left: 0; 
} 

.infos{ 
    display:block; 
} 


.introParagraph,#introParagraph2{ 
    color: #A0CC3A; 
    font-weight: 300; 
    font-size: 15px; 
    letter-spacing: 1px; 
} 


.introParagraph { 
    font-size: 36px; 
    margin:10px; 
    font-weight: 300; 
} 



.img{ 
    margin:auto; 
    display: block; 
} 

.stuff{ 
    margin-left: 0; 
    margin-right: 0; 
} 

.greenLeadText{ 
    color:greenyellow; 
    font-size: 14px; 
} 

.text{ 
    font-size: 12px; 
} 

@media only screen and (min-width : 320px) { 
    .text{ 
     text-align: center; 
    } 
} 
@media (max-width: 768px) { 
    .text { 
     text-align: center; 
    } 
} 

@media (min-width: 1080px) { 
    #addressForm{ 
     margin-left: -20px; 
    } 

} 

/*.top{ 
    margin-bottom: 80px; 
} 

.bottom{ 
margin-bottom:80px; 
} 

.nf{ 
    display: block; 
} 

.sidebar{ 
    background-color: white; 
    min-height: 720px; 
} 


*/ 



.fullscrn{ 
    height: 100%; 
    width:100%; 
    position: fixed; 
} 

.carousel-inner{ 
    height: 100%; 
} 

.no-pad{ 
    padding: 0; 
    margin: 0; 
} 

Answer 1

你有沒有試圖把傳送帶上

<div class="container"> 

格之外？或者您是否嘗試刪除

<div class="row no-pad> 

？