响应式 W3.css 如何偏移我的列答案

【问题标题】：Responsive W3.css How to offset my columns响应式 W3.css 如何偏移我的列
【发布时间】：2019-04-12 19:46:58
【问题描述】：

我正在使用 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>

我知道在引导程序中他们有一个类可以将当前列偏移特定数量。所以在我上面的例子中，该行将被分成 3 列，宽度相等：33.3333%;但第一列不会有任何内容。

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

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

【问题讨论】：

标签： html css responsive-design

【解决方案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>

【讨论】：

已检查。谢谢。