Текст, выводимый за пределы Bootstrap 3 скважины

Question

Я динамически создаю бутстрап, в котором некоторые введенные тексты должны отображаться с использованием 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

Demo Here

Steps -

Удалить height: 30px; и добавить

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