css - 使用 Bootstrap block 边框

Question

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

我希望图像能够调整大小并像其他带有发光的响应式模板一样彼此相邻，但我尝试的任何方法都不起作用。这一切可能都很简单，但我迷路了。我正在学习，但这让我发疯。我已经通过 c5 应用了一些额外的 css 来使 block 中的图像发光。这是我使用 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/