Bootstrap / 基金会专栏问题

Question

我对 bootstrap 列有一个奇怪的问题。

我使用的网格如下：

<div class="row">
   <div class="col-sm-3">Content1</div>
   <div class="col-sm-3">Content2</div>
   <div class="col-sm-3">Content3</div>
   <div class="col-sm-3">Content4</div>
</div>

并且这些栏目是随机生成的，有时任何栏目中都没有内容，如下所示

<div class="row">
   <div class="col-sm-3">Content1</div>
   <div class="col-sm-3"></div>
   <div class="col-sm-3">Content3</div>
   <div class="col-sm-3">Content4</div>
</div>

Now the problem is that when there is no content in column2 then column3 content shifts left. I want to avoid that.

下面是我得到的演示文稿

当所有块都有内容时

Content1    Content2    Content3    Content4

当第二块没有内容时

Content1    Content3                 Content4

要表示的是：

Content1                 Content3    Content4

Answer 1

最简单的解决方案是在列的末尾添加“ ”。

它不会对您的布局产生太大影响，但会有助于“空”列

Answer 2

您应该在列中添加一个内部 Div 并设置最小高度属性以获得更好的解决方案：

新建HTML

<div class="row">
   <div class="col-sm-3"><div class="column-content">Content1</div></div>
   <div class="col-sm-3"><div class="column-content"></div></div>
   <div class="col-sm-3"><div class="column-content">Content3</div></div>
   <div class="col-sm-3"><div class="column-content">Content4</div></div>
</div>

CSS

.column-content {
    min-height: 100px;
}

从这个页面获得帮助：http://www.tutorialrepublic.com/css-reference/css-min-height-property.php

Answer 3

我认为 bootstrap 中没有针对您的问题的解决方案。但是您可以使用 jquery 脚本来检查 div 是否为空，如果为空则分配 css 属性 显示：none ; 到 div（使用脚本）

Bootstrap / 基金会专栏问题

Bootstrap / Foundaion Column issue

css

grid

twitter-bootstrap

zurb-foundation