如何隐藏空的网格列? [英] How can I hide empty grid columns?

问题描述

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

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

有什么想法吗?

解决方案

自从 Bootstrap 4 添加了 flexbox，您可以使用 .col 类来自动调整列宽的大小.使用 :empty 伪选择器(或者，如果需要，可以使用像 .col-empty 这样的自定义类)，您可以隐藏没有内容的列.

Codepen

更多关于引导列布局
另外，空伪选择器 - 必须是空元素！

.row { margin: 25px 0;}.col1 { 背景颜色:红色；}.col2 { 背景颜色:浅绿色；}.col3 { 背景颜色:金色；}/* 没有内容时隐藏列的方法 */.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="样式表"/><div class="容器"><div class="row"><div class="col col1">ONE</div><div class="col col2">TWO</div><div class="col col3">三</div>

<div class="row"><div class="col col1">ONE</div><div class="col col2"></div><div class="col col3">三</div>

<div class="row"><div class="col col1"></div><div class="col col2"></div><div class="col col3">三</div>

I'm using bootstrap to make a responsive template for a CMS. I want to have a three column grid in the main area, but sometimes, there isn't content in all three columns. The CMS will add a class to any column that is empty, so I can use that to hide them, but I can't get bootstrap to expand the other two columns to fill the area.

So, if I have three columns that are all col-md-4, but one is hidden, I basically want the others to become col-md-6. If two are empty, I'd want the remaining one to be col-md-12. But, I haven't had any luck.

Any ideas?

解决方案

Since the addition of flexbox to Bootstrap 4, you can use the .col class to automatically size the column widths. Using the :empty pseudo selector (or if you wanted, a custom class like .col-empty) you can hide columns with no content.

Codepen

More about Bootstrap Column Layout
Also, Empty Pseudo Selector - must be empty element!

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

这篇关于如何隐藏空的网格列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！