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这样的课程存在。请阅读文档：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

使用Materialize创建可伸缩列

1 个答案: