javascript - 文本出现在 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()) 出现在井外。我希望它存在于井内。我尝试在 div class='well' 行中使用 clearfix，但没有用。有谁知道我该如何解决这个问题？提前致谢!

Answer 1

问题是由你的 css height: 30px; 引起的，因为它限制了井的大小，所以它不能扩展到它的内容的大小。

如果您简单地删除此样式，那么它将正常工作。

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