1

我有这个有 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)------

当屏幕变小？

4

1 回答 1

0

您对网格的标记不正确。使用一行来包含列。我认为不存在像 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

于 2015-06-09T19:51:17.460 回答