2014-09-18 63 views
0

我想通過input-group屬性定位元素,其中一個是textarea,接下來是幾個glyphes和button,我想不是很重要。我想把它放在垂直順序中,而不是由默認輸入組提供的水平順序。通過引導程序中的輸入組垂直定位textarea

我該如何以正確的方式做到這一點?


更新:代碼示例在這裏。正如你所看到的,所有的元素都是水平放置的。我想在下一行移動字形+按鈕塊。我怎樣才能做到不輸入組輸入屬性? HTML:

<div class="textareaField input-group"> 
     <textarea class="form-control custom-control" rows="3"></textarea> 
     <div class="textareaFooter input-group-addon"> 
      <span class="glyphicon glyphicon-picture"></span> 
      <span class=" btn btn-primary">Send</span> 
     </div> 
    </div> 

http://jsfiddle.net/sva6nr8z/

+0

到目前爲止你有什麼?告訴我們你的代碼... – 2014-09-18 18:27:05

+0

我添加一些代碼例如 – nagafono 2014-09-18 19:26:39

+0

你說你想圖標/按鈕堆疊而不是相鄰? – Dan 2014-09-18 19:28:47

回答

1

OK,你的CSS改成這樣:

.input-group textarea{display:block; float:none;} 
.input-group .textareaFooter{display:block; float:none; clear:both; width:100%;} 
.input-group .glyphicon-picture{display:block; float:none; margin:20px auto;} 
.input-group .btn{display:block; float:none; clear:both; width:100%;} 

當然,你需要調整頁邊距和大小,以您的需求,但重要的部分是給予顯示:塊屬性textarea.textareaFooter

See JSFiddle

+1

這裏是一個工作的例子,如果你想編輯你的帖子,@Fabio:www.bootply.com/Yd8Qq5LWKe – Frumples 2014-09-18 19:40:59

+0

啊,謝謝@Frumples,其實我用他自己的小提琴,只是忘了補充一下,我編輯了回答,但很多thanx的幫助:) – Devin 2014-09-18 19:45:41

+0

哦,這就是我正在尋找,thx,@Fabio和其他人 – nagafono 2014-09-18 20:06:15