强制列在特定 window 宽度范围内占据全宽

Question

我正在使用 MaterializeCSS 框架，目前结构如下，一行中包含 3 个内容列：

<div class="container">
<div class="section">
    <div class="row">
        <div class="col s12 m4"> <!-- 1st column -->
            <div class="icon-block z-depth-2">
                <h2 class="center red-text"><i class="mdi-action-description"></i></h2>
                <h5 class="center">Content Title 1</h5>
                <p class="light"> content Text 1 </p>
            </div>
        </div>  <!-- 1st column  end -->

        <div class="col s12 m4"> <!-- 2nd column -->
            <div class="icon-block z-depth-2">
                <h2 class="center red-text"><i class="mdi-action-settings"></i></h2>
                <h5 class="center">Content Title 2</h5>
                <p class="light"> content Text 2 </p>
            </div>
        </div>  <!-- 2nd column end -->

        <div class="col s12 m4"> <!-- 3rd column -->
            <div class="icon-block z-depth-2">
                 <h2 class="center red-text"><i class="mdi-action-help"></i></h2>
                <h5 class="center">Content Title 3</h5>
                <p class="light"> content Text 3 </p>
            </div>
        </div>  <!-- 3rd column end -->
    </div>  <!-- row end -->
  </div>  <!-- section end -->
</div> <!-- container end -->

在进行试验时，我发现当 window 宽度为 587px 或更小时，这些列在桌面设备上开始彼此排序（垂直布局），但我猜那些可能是（也可能是）一些百分比值。通过搜索相关类并查看它们的属性，我无法在 materializecss 代码中找到任何相关内容。

问题：如何修改这些列开始垂直堆叠的宽度？

Answer 1

只需覆盖 min-width 属性。但我会创建一个自定义 class 然后覆盖它。以下是您当前代码的示例。

@media only screen and (min-width: 320px) {
  .row .col.m4 {
    width: 33.33333%;
    margin-left: 0;
  }
}

JSfiddle

Answer 2

Materialize 提供 sass 因此，如果您知道如何使用它，您可以轻松修改这些值。

查看 sass/components/_grid.scss file 中的以下代码片段它负责网格的 css（因此也负责 container、col、row、sX 等元素的宽度）：

  .col {
float: left;
@include box-sizing(border-box);
padding: 0 $gutter-width / 2;

$i: 1;
@while $i <= $num-cols {
  $perc: unquote((100 / ($num-cols / $i)) + "%");
  &.s#{$i} {
    width: $perc;
    margin-left: 0;
  }
  $i: $i + 1;
}
$i: 1;
@while $i <= $num-cols {
  $perc: unquote((100 / ($num-cols / $i)) + "%");
  &.offset-s#{$i} {
    margin-left: $perc;
  }
  $i: $i + 1;
}

@media #{$medium-and-up} {

  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote((100 / ($num-cols / $i)) + "%");
    &.m#{$i} {
      width: $perc;
      margin-left: 0;
    }
    $i: $i + 1;
  }
  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote((100 / ($num-cols / $i)) + "%");
    &.offset-m#{$i} {
      margin-left: $perc;
    }
    $i: $i + 1;
  }

}

@media #{$large-and-up} {

  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote((100 / ($num-cols / $i)) + "%");
    &.l#{$i} {
      width: $perc;
      margin-left: 0;
    }
    $i: $i + 1;
  }
  $i: 1;
  @while $i <= $num-cols {
    $perc: unquote((100 / ($num-cols / $i)) + "%");
    &.offset-l#{$i} {
      margin-left: $perc;
    }
    $i: $i + 1;
  }

}

如您所见，有几个 min-width 查询，相关变量设置在 _variable.scss:

// Media Query Ranges
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$small-screen: 600px !default;
$medium-screen: 992px !default;
$large-screen: 1200px !default;

您可以根据需要简单地更改值，然后 "compile" 将其更改为 css。

强制列在特定 window 宽度范围内占据全宽

Force a column to take full width within a specific window width range

html

css

materialize