如何隐藏空格子列？

Question

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

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

有任何想法吗？

Answer 1

有可能的。这在像dotnetnuke这样的CMS系统中尤其有用，因为用户在列中添加内容时，您并不总是知道列中是否有任何内容。

$( document ).ready(function(){
    if ($('.sideBar').is(':empty')) {
        $('.sideBar').remove()
        $('.myContent').removeClass('col-md-9').addClass('col-md-12');
    }
});

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 sideBar">menu</div>
    <div class="col-md-9 myContent"></div>
</div>

你可以完全自动化，这是开始，有人喜欢继续我吗？ :)

$( document ).ready(function(){
  $('.row').each(function() {
    var row = $(this);    
    row.children().each(function () {
      var col = $(this);
      if col.is(':empty')
      {
        col.remove();
       /*TODO: we need to first count all empty cols, then divide those among non empty cols by changing their style*/
      }
    });
  });
});

Answer 2

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

Answer 3

自从将flexbox添加到Bootstrap 4后，您可以使用.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>

Answer 4

我建议使用与应用css样式相同的逻辑来添加bootstrap css类，例如“col-md-6”。与任何样式一样，可以根据需要添加或删除引导程序样式。