Bootstrap 3 Textarea 与 input-group-button 和 btn-group-vertical答案

【问题标题】：Bootstrap 3 Textarea with input-group-button and btn-group-verticalBootstrap 3 Textarea 与 input-group-button 和 btn-group-vertical
【发布时间】：2019-02-19 15:04:57
【问题描述】：

我正在使用 bootstrap 3，我有一个带有 textarea 和两个按钮的表单。我想要的是使用 btn-group-vertical 和 textarea 对带有 input-group-button 的按钮进行分组。

我的代码是：

<form>
    <div class="input-group">
        <textarea class="form-control" rows="2" style="resize:none"></textarea>
        <span type="submit" class="input-group-addon btn btn-primary">Button 1</span>
        <span type="submit" class="input-group-addon btn btn-primary">Button 2</span>
    </div>
</form>

这个选项按钮保持很大。

第二个选项：

<form>
    <div class="input-group">
        <textarea class="form-control" rows="2" style="resize:none"></textarea>
        <span class="input-group-addon">
            <span class="btn-group-vertical">
                <span type="submit" class="btn btn-primary">Button 1</span>
                <span type="submit" class="btn btn-danger">Button 2</span>
            </span>
        </span>
    </div>
</form>

我想要第二个选项，但没有灰色框和这个边距。

有人可以帮我吗？

【问题讨论】：

它是你对span的使用，它会占用剩下的空间，就像填充一样。您可以使用网格来捕获您想要的东西。你知道如何在 bootstrap 中实现 row/col 定义，实现网格吗？
是的，我知道，但我不明白我在哪里使用它。

标签： html css forms twitter-bootstrap-3

【解决方案1】：

在你的css文件中写

.input-group-addon{
  padding: 0;
}

这将删除按钮周围的填充。

【讨论】：

它不工作。它删除左右填充，但顶部和底部不会改变。
谢谢，但如果我改变 textarea 的高度或行，就会中断