向Bootstrap旋轉木馬添加響應邊界

Question

我很難在使用引導製作的旋轉木馬上實現響應邊界。

我的情況很簡單。我不想要一個全角旋轉木馬;我的圖像寬度爲940像素，必須是寬度的最大尺寸。當然，轉盤必須與中心水平對齊。

這就是爲什麼我裹在＃旋轉木馬容器具有以下CSS一切的原因：

#carousel-container { 
    margin: 25px auto 0px auto; 
    max-width: 940px; 
} 

這是我目前的HTML代碼（bluebg類只是增加了一個藍色的背景該行）。很像由引導文件給出的標準代碼：

<div class="row bluebg"> 
    <div id="carousel-container"> 
     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
      </ol> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="img/carousel-test.jpg" alt="Carousel Test"> 
      </div> 
      <div class="item"> 
       <img src="img/carousel-test.jpg" alt="Carousel Test 2"> 
      </div> 
      </div> 

      <!-- Controls --> 
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div> 
    </div> 
</div> 

似乎一切都工作正常，但事情是...我需要添加邊框頂部，左側和右側。 10px白色邊框。我嘗試了一切，但每次，當我調整瀏覽器窗口的大小時，右側和左側邊框被剪切，並且不包含在響應視圖中。

目前，這是我加入我的CSS邊界：

.carousel-inner { 
    border-top: 10px; 
    border-left: 10px; 
    border-right: 10px; 
    border-bottom: 00px; 
    border-color: #fff; 
    border-style: solid; 
} 

我想即使是.carousel類相同，但沒有運氣。

這是我從我的桌面瀏覽器中得到：

這是我從我的移動視圖獲取或調整瀏覽器窗口中的最小值：

我想這些邊界始終顯示！

我該如何做到這一點？先謝謝你們。