Добавление адаптивных границ к карусели Bootstrap

Question

Мне сложно провести отзывчивые границы на карусели, сделанные с помощью бутстрапа.

Моя ситуация проста. I не нужен полноразмерный карусель; мои изображения имеют ширину 940 пикселей и максимальный размер ширины. Конечно, карусель должен быть выровнен по горизонтали к центру.

Это причина, почему я обернул все в # карусельных-контейнере со следующим CSS:

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

Это мой текущий HTML-код (bluebg класса просто добавляет синий фон для ряд). Довольно много, как стандартный код, указанный на Bootstrap документации:

<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 класса, но не повезло.

Это то, что я получаю от моего настольного браузера:

И это то, что я получаю от моего мобильного зрения или изменение размера окна браузера до минимума:

Я хочу эти границы всегда отображаться!

Как я могу это достичь? Спасибо заранее, ребята.

Answer 1

Благодаря тому, кто ответил, и все ваши усилия.В конце концов, после многих попыток, я исправил проблему самостоятельно с помощью этого CSS:

.row { 
    margin-right: inherit; 
    margin-left: inherit; 
} 

по умолчанию .row в начальной загрузки CSS был установлен в:

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
} 

Я не «знаю смысл этого решения, но это было причиной, почему мои карусельного границы были на самом деле действует, как ожидалось:

Надеюсь, этот ответ будет полезен всем остальным, кто попал в мою же проблему.

Answer 2

Вы должны переопределить медиа-запрос, который установлен на 0 ваших границ.

1. От inpector поиск селекторов и медиа-запросов, которые делают это, например, будет:

   @media screen and (max-width: 979px) { 
       div.corousel-inner {   
        border: 0; 
       } 
   } 
   

2. Добавить класс в carousel-inner, как этот <div class="carousel-inner my-inner">

3. В файле CSS добавить правило:

   @media screen and (max-width: 979px) { 
       div.corousel-inner.my-inner {  
        border-top: 10px; 
        border-left: 10px; 
        border-right: 10px; 
        border-bottom: 00px; 
        border-color: #fff; 
        border-style: solid; 
       } 
   } 
   

Answer 3

Like this padding and background color in carousel class. 

DEMO: - http://jsfiddle.net/7Ur6z/260/