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，右邊框-right.png。 如何使用bootstrap 3做到這一點？

DIV的結構： http ： //i60.tinypic.com/29boxsl.jpg

Answer 1

不明白你的意思。 邊框是圖像嗎？ 因此，您有3列：L（皮包骨頭），中間（有背景，R（皮包骨頭）嗎？這是使用CSS完成的，不是特別用Bootstrap，因為沒有這樣的設計模式，盡管您可以重寫他們的列類，這比使用自定義CSS更為煩人。

演示： 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 */