Bootstrap input-group textarea 帶按鈕

問題描述

我正在嘗試實現一個簡單的提交輸入組。我目前有以下幾個：

<link rel="stylesheet" href="http://jsd.admincdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://googleajax.admincdn.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.admincdn.com/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="input-group">
    <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea> <span class="input-group-btn">
                                    <button class="btn btn-primary">
                                        <span>Send</span>

    </button>
    </span>
</div>

我想要’Send’ 按鈕佔據文本區域的整個高度。這是可行嗎

最佳解決辦法

您需要做的是使用 input-group-addon 實用程序。這將允許按鈕的空間佔據整個高度。您將需要調整填充，因為它僅適用於懸停 (顏色更改) 。我建議複製所有相關的類樣式，並自己製作 (對於顏色和背景顏色，因此它不是默認的 Bootstrap 樣式) 。

<link rel="stylesheet" href="http://jsd.admincdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://googleajax.admincdn.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.admincdn.com/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="input-group">
    <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea>
    <span class="input-group-addon btn btn-primary">Send</span>
</div>

我知道它不符合 Bootstrap 文檔，但是他們的文檔假定你沒有使用 textarea 。

參考文獻

• Bootstrap input-group textarea with button

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。