Question

假设我有一个引导网格：

<div class="row">
    <div class="col-sm-3">First Name</div>
    <div class="col-sm-3">John</div>
    <div class="col-sm-3">Last Name</div>
    <div class="col-sm-3">Smith</div>    
</div>

这很好用。

但是，如果第二个单元格为空，则第二个单元格根本不会被渲染：

<div class="row">
    <div class="col-sm-3">First Name</div>
    <div class="col-sm-3"></div>
    <div class="col-sm-3">Last Name</div>
    <div class="col-sm-3">Smith</div>    
</div>

当存在多行时，这会导致意外的包装行为：

<div class="row">
    <div class="col-sm-3">First Name</div>
    <div class="col-sm-3"></div>
    <div class="col-sm-3">Last Name</div>
    <div class="col-sm-3">Smith</div>    
</div>
<div class="row">
    <div class="col-sm-3">First Name</div>
    <div class="col-sm-3">Timothy</div>
    <div class="col-sm-3">Last Name</div>
    <div class="col-sm-3">Barton</div>    
</div>

问题似乎是当内容为空时，单元格似乎根本没有渲染。我知道这可以通过在内容为空时添加 来解决，但我正在寻找一种不太突兀的解决方案 - 最好使用Bootstrap或CSS。

Answer 1

是的，这就是HTML中块级元素的本质。如果没有内容，并且它们没有最小高度设置，则它们会崩溃。

一种解决方法是：

.col-sm-3:empty::after{
  content: ".";
  visibility:hidden;
}

Answer 2

使用偏移类。

像：

<div class="row">
    <div class="col-sm-3">First Name</div>
    <div class="col-sm-3 offset"></div>
    <div class="col-sm-3">Last Name</div>
    <div class="col-sm-3">Smith</div>    
</div>

这将创建3个网格单元格的空白空间

检查：http://www.bootply.com/bj8EUvwPS6

Answer 3

您可以使用JQ在每个没有内容的单元格中添加空间

#Value!

http://www.bootply.com/KIUjqVKQrw

Bootstrap网格单元格中的空内容导致单元格无法渲染

3 个答案: