Html 引导程序3-如何放置图像的左边框和右边框？

这种情况下，有3张图片

我有：

1） left.png-div的左边框

2） right.png-div的右边框

3） background.png-div的背景

我有一个代码：

<div class="container">
    <div class="row clearfix">
        <div class="col-lg-4 column left_part"> ... content ... </div>
    </div>
</div>

... 所容纳之物

任务 有一个“div”，它应该有自己的背景（background.png），左边框有固定的宽度，右边框有固定的宽度。左边框-left.png，右边框-right.png。如何使用bootstrap 3实现这一点

---

DIV的结构：

不确定您的意思。边界是图像吗？所以你有三列：L（skinny column），middle（这有一个背景，R（skinny column）？这是用CSS完成的，特别是用Bootstrap，因为没有这样的设计模式，尽管你可以超越他们的column类，这比用自定义CSS更烦人

演示： HTML

<div class="my-funky-img-box">
   <div class="col-bdr left-border-col">
   </div>
   <!--/.col-bdr.left-border-col-->
   <div class="background-col">
   </div>
   <!--/.background-col-->
   <div class="col-bdr right-border-col">
   </div>
   <!--/.col-bdr.left-border-col-->
</div>
<!--/.my-funky-img-box-->

---

谢谢！我做到了。但是另一种方法。在你的方法中，当我插入左边框颜色->左边框图像时，我的div将是700px高度，那么原始图像将非常扩展。

html,
body {
    height: 100%
}
.my-funky-img-box {
    background: #ccc;
    width: 100%;
    display: table;
    height:40%; /* this is the height  */
}
.col-bdr,
.background-col {
    display: table-cell
}
.left-border-col {
    width: 15px;
    background: blue; /* put a background image here */
}
.right-border-col {
    width: 15px;
    background: purple; /* put a background image here */
}
.background-col {
    background: url(http://placekitten.com/g/500/500);
    background-size: cover;
    background-position: 50% 50%;
}

/* PUT THIS INSIDE A MEDIA QUERY IF YOU DON'T WANT ALL VIEWPORT WIDTHS TO SEE IT */