html - 响应式 W3.css 如何偏移我的列

Question

我正在使用 w3.css我正在创建的测试布局的移动优先 css。我不明白的是如何使用 w3-col 类将我的列偏移 1/3？

例如:

<div class="w3-row">

        <div class="w3-col m4">
        THIS IS THE AREA THAT I WANT TO BE EMPTY. Or not having this div here at all would be good. 
        </div>

        <div class="w3-col m4">
            <p>I am going to put normal content in this column. It should start 1/3 of the row with the left of it being empty.</p>
        </div>

        <div class="w3-col m4">

        </div>

</div>

我知道在 bootstrap 中他们有一个类可以将当前列偏移一个特定的量。所以在我上面的例子中，该行将被分成 3 列，宽度都相等:33.3333%；但第一列中没有任何内容。

我的发现:当我尝试将第一列留空时，宽度为 0px。此外，当我转到移动屏幕时，我希望我所有的列都显示为 100%，但这意味着我的空白列也会显示为 100%，这没有任何意义，因为我不再需要它了。

是否可以使用响应式 w3 css 完成我的布局？

Answer 1

如果 div 中没有任何内容并且在移动设备上隐藏它，则强制设置最小宽度

.custom{
  min-width: 480px;
  max-width: 1024px;
  height: 1px;
}

@media only screen and (max-device-width: 768px) {
	.custom{
    display: none;
  }
}

<div class="w3-row">

        <div class="w3-col m4 custom">
        THIS IS THE AREA THAT I WANT TO BE EMPTY. Or not having this div here at all would be good. 
        </div>

        <div class="w3-col m4">
            <p>I am going to put normal content in this column. It should start 1/3 of the row with the left of it being empty.</p>
        </div>

        <div class="w3-col m4">
          Last column
        </div>

</div>