文本出现在Bootstrap 3井外

Question

我正在动态创建一个Bootstrap，其中一些输入的文本应该使用JavaScript和CSS / HTML显示。我的代码如下：

$("#addqueuebutton").click(function(){

    var queue = '<div class="well queue-well">';
    queue += '<a href="#"><span class="glyphicon glyphicon-plus"></a></span>';
    queue += '<div class="inline"><h3>&nbsp ' + $('#queuename').val() + '</h3></div>';
    queue += '</div>';
    $('#queues').append(queue);
});

我的CSS：

.queue-well{
    height: 30px;
}

我的问题是，我输入的文字（$('#queuename').val()）出现在井外。我希望它存在于井内。我尝试在clearfix行中使用div class='well'，但它没有用。有谁知道我怎么解决这个问题？提前谢谢！

Answer 1

问题是由您的css height: 30px;引起的，因为它会限制井的大小，因此无法扩展到其内容的大小。

如果您只是删除此样式，那么它将正常工作。

演示：https://jsfiddle.net/alan0xd7/cgzpe9yw/6/

Answer 2

演示Here

步骤 -

删除height: 30px;并添加

.queue-well .inline {
  display: inline-block;
}