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，谢谢你的回答。我一直在寻找一个没有额外设置的解决方案。最后，我选择使用<span>标记替换<input>标记，该标记对应于DOM中的HTML空元素，即使在空的时候也保持其高度。

在Bootstrap中，当内部没有内容时，如何避免行崩溃？

2 个答案: