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

由于在Bootstrap 4中添加了flexbox，因此您可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="calculator"> <input type='radio' name='pricePlan' value='1' checked>Price One <br> <input type='radio' name='pricePlan' value='2'> Price Two <br> </form> <input id="amount" value="100" type="text" name="text"> <input id="net_price" type="text" name="text" readonly> <input id="total_price" type="text" name="text" readonly>类来自动调整列宽的大小。使用.col伪选择器（或者，如果需要，可以使用:empty之类的自定义类），可以隐藏不包含任何内容的列。

Codepen

有关Bootstrap Column Layout的更多信息
另外，Empty Pseudo Selector-必须为空元素！

.col-empty

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

Answer 4

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

如何隐藏空格子列？

4 个答案: