Question

我正在创建一个界面，我需要进行以下设置：button - textarea - button。

使用输入组，按钮不会缩放以匹配textarea的高度（与＆＃34;正常＆＃34;表格输入一样）

理想的标记：

<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的高度不匹配。

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

现在，使用＆＃34;输入组 - 插件＆＃34;确实使前置和附加项匹配，但它们不会成为按钮。将一个按钮放在＆＃34;输入组 - 插件＆＃34;标签看起来很可怕。

那么，有没有办法让按钮与textarea的高度相匹配？

Answer 1

这是一个可能适合您的解决方案。我认为问题是这些是使用:before类插入的自定义字体图标。因此，他们不会回复height您需要使用font-size:

对其进行调整

<强> Working Demo

我在这里看到的唯一问题是你必须对它们进行硬编码才能与你的输入框正确对齐（我已经使用了em的偏好）。我添加了一些类来简化操作，而不是覆盖bootstrap 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;}

Answer 2

我希望这个例子可以提供帮助：

@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 cambiareltaamañodetextarea el button se adaptaaltamaño。

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

2 个答案: