twitter-bootstrap - 如何隐藏空的网格列？

Question

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

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

有任何想法吗？

Answer 1

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

Codepen

更多关于 Bootstrap Column Layout
另外，Empty Pseudo Selector - 必须是空元素!

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