Css 引导网格单元格中的空内容导致单元格无法呈现

假设我有一个引导网格：

<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>

名字
姓
史密斯
名字
提摩太
姓
巴顿

问题似乎是，当内容为空时，单元格似乎根本没有呈现。我知道这可以通过在内容为空时添加一个

来解决，但我正在寻找一个不太显眼的解决方案-最好使用引导或CSS。

使用偏移类

比如：

名字
姓
史密斯

这将创建一个由3个网格单元组成的空白空间

选中：

使用偏移类

比如：

名字
姓
史密斯

这将创建一个由3个网格单元组成的空白空间

---

检查：

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

解决方法之一是：

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

---

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

解决方法之一是：

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

---

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

$('.col-sm-3').each(function (index, elem) {
  if($(elem).text().length === 0) {
    $(elem).html(' ');
  }
});

---

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

$('.col-sm-3').each(function (index, elem) {
  if($(elem).text().length === 0) {
    $(elem).html(' ');
  }
});

---

已经有一个水平空间了。“偏移量”不起任何作用。问题是当你调整浏览器的大小和列换行时，就没有垂直空间了。哦…，那么我们可以使用像.top buffer{margin top:10px；}这样的东西吗？如果它不一定是10px，它可以是你喜欢的任何值。当然，但我认为这样做的目的是，OP不必担心根据是否有数据来更改HTML。换句话说，他不想说：

如果是空的，那么就执行XYZ

他希望它不需要考虑就可以工作。您可以想象，如果有500个列，每个列周围都有if语句（无论他使用何种语言生成HTML），这将不太理想。啊啊啊哈，我现在明白了：）谢谢：），，我通常做的是在我有这种情况的时候使用类似的东西…但是我想你的答案似乎很简单，这里已经有了一个水平的空间。“偏移量”不起任何作用。问题是当你调整浏览器的大小和列换行时，就没有垂直空间了。哦…，那么我们可以使用像.top buffer{margin top:10px；}这样的东西吗？如果它不一定是10px，它可以是你喜欢的任何值。当然，但我认为这样做的目的是，OP不必担心根据是否有数据来更改HTML。换句话说，他不想说：

如果是空的，那么就执行XYZ

他希望它不需要考虑就可以工作。你可以想象，如果有500个列，每个列周围都有if语句（无论他用什么语言生成HTML），这都不太理想。啊啊啊啊哈，我现在明白了：）谢谢：），，我通常会在遇到这种情况时使用类似的语句……但我想你的答案似乎简单多了！工作，但我很好奇。。。内容是什么：“.”do？嗯，“content”只是指将这个HTML添加到元素中。如果您愿意，可以将其更改为：

content:“我是一些很棒的内容！”

。如果您需要支持IE8，请记住在“after”选择器之前使用一个冒号，并确保声明了doctype。此外，如果您仍然需要支持IE8，请记住购买大量酒精。太棒了！工作，但我很好奇。。。内容是什么：“.”do？嗯，“content”只是指将这个HTML添加到元素中。如果您愿意，可以将其更改为：

content:“我是一些很棒的内容！”

。如果您需要支持IE8，请记住在“after”选择器之前使用一个冒号，并确保声明了doctype。此外，如果您仍然需要支持IE8，请记住购买大量酒精。