Bootstrap input-group textarea 带按钮

问题描述

我正在尝试实现一个简单的提交输入组。我目前有以下几个：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.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.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>

我想要’Send’ 按钮占据文本区域的整个高度。这是可行吗

最佳解决办法

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.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.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 。

参考文献

• Bootstrap input-group textarea with button

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。