使用Bootstrap阻止边框

Question

我有一个带有两个图像块的引导程序的侧边栏，一个在另一个的顶部，我的客户希望在块周围有一个发红的边框。我有黑色背景和发光边框。问题是，当我将浏览器调整为平板电脑大小时，黑色背景和边框比图像宽，图像不居中。我想边框和发光在图像周围是10px并且在屏幕中心，而不是在左边。如果我使用透明背景，图像在左侧，红色边框横跨整个屏幕，再次看起来很糟糕。这是两个截图：

我希望图像能够像其他响应模板一样调整大小并且彼此相邻，并且我尝试的任何工作都没有。这可能很简单，但我迷路了。我正在学习，但这让我发疯。我已经通过c5应用了一些额外的css来为块中的图像发光。这是我使用Chrome开发工具时出现的代码：

element.style { }

#blockStyle167Sidebar40 {
background-repeat: no-repeat;
background-color: #000000;
-webkit-box-shadow: 0 0 6px 4px rgba(255,0,0,.7);
box-shadow: 0 0 6px 4px rgba(255,0,0,.7);
padding: 10px;
}
.pic {
border: 1px solid #000000;
height: 245px;
width: 370px;
overflow: hidden;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheetdiv {
display: block;
}
Inherited from div#sidebar-wrap.span4.sidebar-wrap.sidebar.color-content.pad
#main-content .color-content {
color: #FFFFFF;
}
Inherited from div.row-fluid.has-sidebar
#page .row-fluid {
color: #ffffff;

很抱歉，这是很久但我的网站处于维护模式，我不知道如何链接页面。我可以给某人访问，以便可以查看它。

感谢您的帮助。

Answer 1

基本上你需要做的是创建一个10px的透明边框和一个红色的盒子阴影。

img {
  border: 10px solid transparent;
  box-shadow: 0px 0px 15px 0px rgba(255,0,0,1);
}

然后将每个图像设置为您想要的宽度％。

请参阅此jsfiddle http://jsfiddle.net/TZh2Y/