使用 Materialise 制作可扩展的列

Question

我的表格有 3 列。我希望这些列在屏幕超过一定宽度后堆叠：

 <form id="shiftform" class="col s12 m12 l12">
      <div class="form-group col s0 m4 l4">
           {!! Form::label('shift_description',  trans('crud.shiftdescription'))!!}
           {!! Form::text('description', null, array('id'=> 'shift_description')) !!}
            {!!$errors->first('description', '<span class=error>:message</span>')!!}
      </div>
      <div class="form-group col s0 m4 l4">
           {!! Form::label('shift_starttime', trans('crud.shiftstarttime'))!!}
           {!! Form::text('starttime', null, array('id'=> 'shift_starttime')) !!}
           {!!$errors->first('starttime', '<span class=error>:message</span>')!!}
     </div>
     <div class="form-group col s0 m4 l4">
          {!! Form::label('shift_endtime', trans('crud.shiftendtime'))!!}
          {!! Form::text('endtime', null, array('id'=> 'shift_endtime')) !!}
          {!!$errors->first('endtime', '<span class=error>:message</span>')!!}
    </div>

  <input type="hidden" id="id" value="0">
</form>

表单在各种屏幕尺寸上看起来像这样：

(1)----- (2)-------- (3)--------

有什么办法可以变成这样

(1)------

(2)------

(3)------

屏幕什么时候变小？

Answer 1

您对网格的标记不正确。使用一行来包括列。我不认为像 s0 这样的 class 存在。请阅读文档：Materialize Grid

您可以将标记更改为：

<div class="row">
  <form id="shiftform" class="col s12 m12 l12">
    <div class="form-group col m4 l4">
      <img src="http://placehold.it/300x300" />
    </div>
    <div class="form-group col m4 l4">
      <img src="http://placehold.it/300x300" />
    </div>
    <div class="form-group col m4 l4">
      <img src="http://placehold.it/300x300" />
    </div>

    <input type="hidden" id="id" value="0" />
  </form>

JSfiddle

使用 Materialise 制作可扩展的列

Making scalable columns with Materialize

css

materialize