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>

我知道在引导程序中它们有一个类可将当前列偏移一定数量。因此，在上面的示例中，该行将被分为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>

自适应W3.css如何抵消我的专栏

1 个答案: