Question

我正在使用Bootstrap构建一个输入组 - 它是一个带有下拉列表和一个只读标签的按钮。单击按钮时，我会在标签上填入一些文字。问题是如果文本包含换行符，那么输入组不会扩展到适合，文本只会呈现在顶部。

我创建了this fiddle来重现问题 - 只需点击按钮即可设置文字和即时痛苦。

这是我的再现HTML和JS：

<div class="input-group">
    <div class="input-group-btn">
          <button type="button" class="btn btn-default" id="compile" onclick="compile()">Compile</button>
          <button type="button" class="btn btn-default dropdown-toggle" id="selector" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu" role="menu">
               <li><a href="#" onclick="init()">Example</a></li>
          </ul>
    </div>
    <label class="form-control" id="result"></label>            
</div>

function escapeRegExp(string) {
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(find, replace, str) {
    return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function escapeHTML( string )
{
    var pre = document.createElement('pre');
    var text = document.createTextNode( string );
    pre.appendChild(text);
    return pre.innerHTML;
}
function addtext() {
    var response = "Some\nText"
    response = response.trim()
    response = escapeHTML(response)
    response = replaceAll("\n", "</br>", response)
    document.getElementById('result').innerHTML = response;    
}

如何让Bootstrap调整标签字段的大小（最好是带有滚动条的最大值）以获得更大的文本输出？

我已经成功地用textarea取代了标签，textarea展示了所有想要的语义，但Bootstrap并没有正式支持带有textareas的按钮插件，这在这种结构的不良造型中显而易见。

Answer 1

问题在于，分类为.form-control的标签的高度为34px。它会保持这个大小。如果您将其设置为height: auto，则当内容大于34px时，它会展开。

当然，这将搞乱界面其他部分的布局。你需要摆弄它来缓解它。示例：http://jsfiddle.net/b9nZJ/

使用新行展开文本的输入组标签

1 个答案: