在Bootstrap 3以外出現的文字

我正在動態地創建一個Bootstrap以及其中應該使用JavaScript和CSS/HTML顯示一些輸入的文本。在Bootstrap 3以外出現的文字

$("#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，但它不起作用。有誰知道我該如何解決這個問題？提前致謝！

來源

2015-07-19 user3033194

' '''這行不匹配的結束標記。 – alan0xd7

@ alan0xd7哦，對，謝謝，我糾正了這一點。但是，早期的問題依然存在。 – user3033194

創建一個小提琴，以便我可以幫助你 – Ajey

問題是由於您的css height: 30px;，因爲它限制了井的大小，所以它不能擴大到其內容的大小。

如果你只是刪除這種風格，那麼它會正常工作。

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

來源

2015-07-19 13:31:52 alan0xd7

演示Here

步驟 -

刪除height: 30px;並添加

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

來源

2015-07-19 13:34:18 Ajey

回答

相關問題