为Bootstrap轮播添加响应边框

Question

我在使用bootstrap 制作的旋转木马上实现响应式边框时遇到了困难。

我的情况很简单。我不想要全宽旋转木马;我的图像宽度为940像素，必须是宽度的最大尺寸。当然，旋转木马必须与中心水平对齐。

这就是为什么我用以下CSS将所有内容都包装在 #carousel-container 中的原因：

#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

您必须覆盖设置为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 2

Like this padding and background color in carousel class.

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

Answer 3

感谢所有人的回答和所有的努力。最后，经过多次尝试，我通过使用这个CSS解决了问题：

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

bootstrap CSS 中的默认.row设置为：

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

我不知道这个决定的含义，但这就是为什么我的轮播边界实际上按预期行事的原因：

我希望这个答案对所有遇到同样麻烦的人都有用。