html - 带按钮的 Bootstrap 输入组文本区域

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 文档，但他们的文档假定您没有使用文本区域。