文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >w3-css空列不占用空间，但在引导过程中占用空间。

问w3-css空列不占用空间，但在引导过程中占用空间。
EN

Stack Overflow用户
提问于 2017-04-19 09:59:46
回答 4查看 2.7K关注 0票数 4

好吧，你们可能都知道新的w3-css是由w3schools开发的。W3-css链接我正在用w3-css做一些处理，似乎他们的网格列有些可疑之处。

显然，这将与Bootstrap进行比较。在引导中，当您将任何列保持为空时，它只占用空间，但在w3-css中不会出现这种情况。

所以w3-css强迫人们不要让他们的列空，否则它会搞砸你的布局。

这可能的解决办法是什么。

柱塞的链接在这里

​

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>

  <h4>Filled column with w3-css</h4>

  <div class="w3-row">
    <div class="w3-col m4 w3-grey">1</div>
    <div class="w3-col m8 w3-red">4</div>

  </div>

  <h4>empty column with w3-css</h4>
  <h5>You cant keep your column empty??? You have to keep something in it. otherwise it want occupy any space. </h5>
  <div class="w3-row">
    <!-- Making first column emty   -->
    <div class="w3-col m4 w3-grey"></div>
    <div class="w3-col m8 w3-red">4</div>
  </div>

  <h4>Filled column with Bootstrap css</h4>

  <div class="row">
    <div class="col-sm-4" style="background-color:red;">12123</div>
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
  </div>

  <h4>empty column with Bootstrap css</h4>

  <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
  </div>

</body>

</html>

​

html
css
twitter-bootstrap
w3c
EN

回答 4

Stack Overflow用户

发布于 2017-09-13 02:48:42

试试这个<div class="w3-col m4 w3-container"></div>

w3-container将创建一个包含padding的空表。

​

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>

  <h4>Filled column</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey">1</div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
  <h4>empty column</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey"></div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
  <h4>not empty column</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey"> </div>
    <div class="w3-col m8 w3-red">4</div>
  </div>

  <h4>Filled column with w3-container</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey w3-container">1</div>
    <div class="w3-col m8 w3-red">4</div>
  </div>

  <h4>empty column with w3-container</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey w3-container"></div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
  <h4>not empty column with w3-container</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-grey w3-container"> </div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
  <h4>empty column with w3-container no background color</h4>
  <div class="w3-row">
    <div class="w3-col m4 w3-container"></div>
    <div class="w3-col m8 w3-red">4</div>
  </div>
  
</body>

</html>

​

票数 4
EN

Stack Overflow用户

发布于 2017-04-19 10:16:29

您可以使用:empty选择器和:before或:after添加一些内容，以使空元素使用一些空间。

伪元素只是CSS，不能被javascript选中或访问。它不是DOM的一部分，它应该没有什么可担心的。

  • 选择only :empty elements (no content, no white-space) .w3-row :空:在{content:'fill it‘之前；可见性:隐藏；}
  • 选择每个元素:empty而不是

如果您的结构可以在空元素中有空白，它将不再有效，它将不会被视为:空。相反，您可以使用space : pseudo每个元素，以确保所有的子元素都使用一些空间。

​

代码语言：javascript
复制
.w3-row > :after {content:'.';visibility:hidden;font-size:1px;}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>

  <h4>Filled column with w3-css</h4>

  <div class="w3-row">
    <div class="w3-col m4 w3-grey">1</div>
    <div class="w3-col m8 w3-red">4</div>

  </div>

  <h4>empty column with w3-css</h4>
  <h5>You cant keep your column empty??? You have to keep something in it. otherwise it want occupy any space. </h5>
  <div class="w3-row">
    <!-- Making first column emty   -->
    <div class="w3-col m4 w3-grey"> <!-- not :empty --></div>
    <div class="w3-col m8 w3-red">4</div>
  </div>

  <h4>Filled column with Bootstrap css</h4>

  <div class="row">
    <div class="col-sm-4" style="background-color:red;">12123</div>
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
  </div>

  <h4>empty column with Bootstrap css</h4>

  <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
  </div>

</body>

</html>

​

票数 2
EN

Stack Overflow用户

发布于 2017-07-25 11:26:18

@GCyrillus的回答是其他方法，但它可能会影响性能。

引导只使用min-height: 1px;，这样可以防止列为空时折叠。

代码语言：javascript
复制
position: relative;
//this min-height prevents collapsing when column is empty
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43492396

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档