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 -->

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

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

Answer 1

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

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

enter image description here

JSfiddle

Answer 2

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

在sass/components/_grid.scss file查看以下代码段它负责网格的css（因此也是container，col，row，sX等元素的宽度：< / p>

  .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;

您可以根据自己的愿望更改值，然后编译＆＃34;它来css。

强制列在特定窗口宽度范围内占据整个宽度

2 个答案: