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

Posted 2023-03-06

【中文标题】将分组按钮的大小调整为文本区域的大小？

【英文标题】：Resize grouped buttons to size of text area?

【发布时间】：2014-02-28 18:12:21

【问题描述】：

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

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

这是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”标签内看起来很糟糕。

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

【问题讨论】：

在我看到的小提琴中，按钮与 textarea 的高度匹配？

修复了链接！ （另外，如果你注意到那段代码，那不是按钮：P）

那么之前显示的链接不正确？看起来这就是您要搜索的内容...

JiFus - 阅读我的问题。您看到的小提琴是“什么样的”作品，即它不是我想要的，因为它没有使用按钮。该链接现在是正确的，并显示了我的标记以及按钮与文本区域的高度不匹配的事实。重新阅读我的问题并检查新链接，因为它已经清楚地解释了。

【参考方案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.

【讨论】：

@David calc 在某些浏览器中不起作用。

【参考方案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;

【讨论】：

我实际上并不担心字形图标的大小，如果我没有提到这一点，我很抱歉。我只是想让按钮元素匹配文本区域的高度。

@MrPablo 所以你正在寻找更像http://jsfiddle.net/3Ty7N/5/的东西？

是的，但图标居中。我通过为按钮和文本区域分配 4em 的高度来修复它:)