将分组按钮的大小调整为文本区域的大小？

Question

我正在制作一个需要进行以下设置的界面：按钮 - 文本区域 - 按钮。

使用输入组，按钮不会缩放以匹配文本区域的高度（与“正常”表单输入一样）

这是Fiddle

理想的标记：

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn">                            
            <span class="glyphicon glyphicon-eye-open"></span>
        </button>
    </span>
    <textarea class="form-control" rows="3"></textarea>
    <span class="input-group-btn">
        <button class="btn btn-danger">                            
            <span class="glyphicon glyphicon-remove"></span>
        </button>
    </span>
</div>

半工作标记（看起来很糟糕，按钮很小并且被灰色包围）：

<div class="input-group">
    <span class="input-group-addon">
        <button class="btn">                            
            <span class="glyphicon glyphicon-eye-open"></span>
        </button>
    </span>
    <textarea class="form-control" rows="3"></textarea>
    <span class="input-group-addon">
        <button class="btn btn-danger">                            
            <span class="glyphicon glyphicon-remove"></span>
        </button>
    </span>
</div>

如您所见，按钮仍然很小，并且与文本区域的高度不匹配。

如果您将 textarea 替换为文本输入，则按钮匹配（如 BS3 文档中所示）

现在，使用“input-group-addon”确实可以使前置和附加的项目匹配，但它们不会是按钮。将按钮放在“input-group-addon”标签内看起来很糟糕。

那么，有没有办法让按钮与文本区域的高度相匹配？

Answer 1

我希望这个例子能有所帮助：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.input-arreglo-group{
    padding: 0px 0px;
}
.input-arreglo{
    margin-top: 0px; 
    height: calc(100% + 15px); 
    border-top-left-radius: 0px; 
    border-bottom-left-radius: 0px;
}

<div class="form-group">
    <label for="proyecto_descripcion">Descripción</label>
    <div class="input-group">
        <textarea class="form-control" style="resize:vertical;" rows="7" id="proyecto_descripcion" name="proyecto_descripcion" placeholder="Descripción del Proyecto"></textarea>
        <div class="input-group-addon input-arreglo-group">
            <button class="btn btn-danger input-arreglo">
                <span class="glyphicon glyphicon-remove"></span>
            </button>
        </div>
    </div>
</div>

Al cambiar el tamaño de textarea el button se Adapta al tamaño.

Answer 2

这是一种可能适合您的解决方案。我认为问题在于这些是使用:before 类插入的自定义字体图标。所以他们不会回复height 你需要用font-size: 调整它们的大小

Working Demo

我在这里看到的唯一问题是您必须对它们进行硬编码才能与您的输入框正确对齐（我使用 em 是出于偏好）。我添加了一些类来简化操作，并且不会覆盖引导 css。

HTML：

  <div class="input-group">
     <span class="input-group-btn">
       <button class="btn">                            
         <span class="glyphicon glyphicon-eye-open custom-eye"></span>
       </button>
     </span>
     <textarea class="form-control custom-control" rows="3"></textarea>
     <span class="input-group-btn">
       <button class="btn btn-danger">                            
         <span class="glyphicon glyphicon-remove custom-remove"></span>
       </button>
     </span>
   </div>

CSS：

.custom-control {height: 5.25em}

.custom-eye {font-size: 4em;}

.custom-remove {font-size: 4em;}