Bootstrap 3 - 如何放置图像的左右边框？

Question

这种情况，有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，右边框 - 右边.png。如何使用bootstrap 3执行此操作？

DIV的结构：http://i60.tinypic.com/29boxsl.jpg

Answer 1

不确定你的意思。边框是图像？所以你有三列：L（瘦小的列），中间（这有一个背景，R（瘦小列）？这是用CSS完成的，特别是Bootstrap，因为没有像这样的设计模式，尽管你可以超越他们的列类，比使用自定义CSS更令人讨厌。

DEMO：http://jsbin.com/jigeku/1/edit

<强> 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-->

<强> CSS

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 */