logo标签列表

在w3-css中，空的列不占据空间，但在bootstrap中会占据空间。

htmlcsstwitter-bootstrapw3c
4

大家可能已经了解w3schools推出的新的w3-css了。 W3-css链接 我正在使用w3-css进行一些手动修改，似乎他们的网格列有点问题。

显然，这会与Bootstrap进行比较。 在Bootstrap中，当您保留任何列为空时，它只占用空间，但是在w3-css中不会这样。

因此，w3-css强迫人们不要让列留空，否则会破坏页面布局。

这个问题可能有哪些解决方案呢？

plunker友好类型的网页链接在这里 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>

4个回答
4

试试这个 <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>

3
为了帮助提问者和其他访问此问题的人，您能否解释一下这个解决方案为什么回答了这个问题？ - stealththeninja
2
你可以使用:empty选择器和:before或:after来添加一些内容，使空元素占用一些空间。
伪元素仅限于CSS，无法被JavaScript选择或访问。它不是DOM的一部分，所以不必担心。
  • select only :empty elements (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和非空元素

如果您的结构中的空元素包含空格，则不再有效，它将不被视为 :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>

点赞了，Bootstrap的列也是这样做的吗？如果不是，他们是如何实现的？ - ankitd
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;
-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>

我在列中添加了h4来创建空间，因此可以添加任何HTML标记来创建空间。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接