2015-11-06 154 views
-1

使用bootstrap3網格系統我想要2行3列的列。有沒有辦法讓行在引導程序中溢出

在第1列中,我將有3行文本輸入(a,b,c),並在第2列中我想要1個圖像,它將佔用整個3行。

有沒有辦法做到這一點?

例如這裏

http://jsfiddle.net/sLxcf5jd/1/

<div class="row"> 
<div class="col-sm-2"><div class="well">1</div></div> 
<div class="col-sm-2"><div class="well">2<img src="http://placehold.it/100x350"></div></div> 
</div> 
<div class="row"> 
<div class="col-sm-2"><div class="well">2</div></div> 
</div> 
<div class="row"> 
    <div class="col-sm-2"><div class="well">3</div></div> 
</div> 

+0

什麼你問(我的理解它),「行」和列是如何在引導程序中工作的。請顯示你的嘗試。 – Patel

+0

你真正要問的是如何製作[相同高度的列](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) 。然後,您可以將圖像設置爲100%高度,或將其設置爲大小爲「cover」的背景。 – isherwood

+0

增加了一個例子,正如你可以看到圖像向下推動整個行,我希望它很好地顯示在行 – rob

回答

1

我編輯你的小提琴,你可以在這裏看到:JSFiddle

<div class="row"> 
    <div class="col-sm-2"> 
    <div class="row"> 
     <div class="well">1</div> 
    </div> 
    <div class="row"> 
     <div class="well">2</div> 
    </div> 
    <div class="row"> 
     <div class="well">3</div> 
    </div> 
    </div> 

    <div class="col-sm-2"> 
    <div class="well"> 
     2 
     <img src="http://placehold.it/80x160"> 
    </div> 
    </div> 
</div> 
+0

jsfiddle鏈接需要[1]刪除,謝謝你的幫助 – rob