好吧，你们都可能知道w3schools的新 w3-css 。 W3-css link 我正在用 w3-css 做一些实际操作，看起来它们的网格列有点可疑。
显然，这将与 Bootstrap 进行比较。 在 bootstrap 中，当您将任何列保持为空时，它只会占用空间，但这不会发生在 w3-css 中。
所以 w3-css 迫使人们不要把他们的列留空，否则会搞砸你的布局。
可能的解决办法是什么。
Plunker friednly ppl ur link is PLUNKER
<!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>
答案 0 :(得分：2)
您可以使用:empty选择器和:before或:after添加一些内容，以使空元素占用一些空间。
伪元素只是CSS，无法通过javascript选择或访问。它不是DOM的一部分，应该没什么可担心的。
:empty元素(no content, no white-space)
.w3-row :empty:before {content:'fill it';visibility:hidden;}<!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>:empty而不是如果您的结构在空元素中可以有空格，则它将不再有效，它将不会被视为：空。您可以改为对每个元素使用伪：after，以确保所有子元素都使用一些空格。
.w3-row > :after {content:'.';visibility:hidden;font-size:1px;}<!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>
答案 1 :(得分：2)
试试这个
<div class="w3-col m4 w3-container"></div>
w3-container将创建一个包含padding的空表。
<!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>
答案 2 :(得分：0)
@GCyrillus的回答是另一种方法，但它可能会影响性能。
Bootstrap只需使用min-height: 1px;即可防止列为空时崩溃。
position: relative;
//this min-height prevents collapsing when column is empty
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
答案 3 :(得分：-2)
<div class="w3-container">
<div class="w3-row">
<div class="w3-col m4"><h4></h4></div>
<div class="w3-col m4"></div>
</div>
</div>
我在col中添加h4以创建空间，因此添加任何html标记以创建空间