带按钮的Bootstrap输入组textarea

Question

我正在尝试实现一个简单的提交输入组.我目前有以下内容:

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/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>

我希望"发送"按钮占据文本区域的整个高度.这可行吗？

Answer 1

您需要做的是使用该input-group-addon实用程序.这将允许按钮的空间占据整个高度.您需要调整填充,因为它仅适用于悬停(颜色更改).我建议复制所有相关的类样式并自己创建(对于颜色和背景颜色,因此它不是默认的Bootstrap样式).

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/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.