如何隐藏空的网格列？

Question

我正在使用引导程序为 CMS 制作响应式模板。我想在主区域有一个三列网格，但有时，所有三列都没有内容。CMS 将向任何空列添加一个类，因此我可以使用它来隐藏它们，但我无法通过引导程序来扩展其他两列以填充该区域。

所以，如果我有三列都是 col-md-4，但其中一个是隐藏的，我基本上希望其他列成为 col-md-6。如果两个是空的，我希望剩下的一个是 col-md-12。但是，我没有任何运气。

有任何想法吗？

Answer 1

由于在 Bootstrap 4 中添加了 flexbox，您可以使用.col该类自动调整列宽的大小。使用:empty伪选择器（或者，如果您愿意，可以使用自定义类，例如.col-empty），您可以隐藏没有内容的列。

代码笔

关于Bootstrap 列布局的更多信息
还有，空伪选择器- 必须是空元素！

.row { margin: 25px 0; }
.col1 { background-color: red; }
.col2 { background-color: lightgreen; }
.col3 { background-color: gold; }

/* ways of hiding the column if no content */
.col-empty, .col:empty, [class^=col-]:empty { display: none; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col col1">ONE</div>
    <div class="col col2">TWO</div>
    <div class="col col3">THREE</div>
  </div>
  
  <div class="row">
    <div class="col col1">ONE</div>
    <div class="col col2"></div>
    <div class="col col3">THREE</div>
  </div> 
  
    
  <div class="row">
    <div class="col col1"></div>
    <div class="col col2"></div>
    <div class="col col3">THREE</div>
  </div> 
</div>

Answer 2

通常，您会使用 PHP（或特定的服务器端语言）逻辑来根据列中是否有内容来应用适当的 Bootstrap 类。这可能不应该用 CSS 来完成。