在Bootstrap中，如何避免在沒有內容的情況下行崩潰？

Question

Here有一個示例顯示我的問題。當我離開柱子空蕩蕩的時候，這個排被弄得一團糟。我想要的是即使它是空的，行也不會塌陷。我怎麼能做到這一點？

代碼：

JS

$(function(){ 
    $("button").on("click",function(){ 
    $("#here").text($(this).text()); 
    }); 
}); 

HTML

<div class="container"> 
    <div class="row" style="background:black"> 
     <div class="col-xs-8 col-xs-offset-2" style="color:brown; background:red"> 
      <span id="here" style="font-size:2em;"></span> 
     </div> 
    </div> 
    <div class="row"> 
     <button>yes</button> 
    </div> 
</div> 

感謝。

Answer 1

據我所知，如果沒有內容，你必須聲明一個高度。

<div class="container"> 
    <div class="row" style="background:black; height: 40px;"> 
     <div class="col-xs-8 col-xs-offset-2" style="color:brown; background:red"> 
      <span id="here" style="font-size:2em;"></span> 
     </div> 
    </div> 
    <div class="row"> 
     <button>yes</button> 
    </div> 
</div> 

Answer 2

@AmyBarrett，謝謝你的回答。我正在尋找一個沒有額外設置的解決方案。最後，我選擇用<input>標籤代替<span>標籤，該標籤對應於DOM中的HTML空元素，即使在空時也保留其高度。