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 のようなクラスは存在しないと思います。ドキュメントをお読みください:マテリアライズ グリッド

マークアップを次のように変更できます。

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

JSフィドル

于 2015-06-09T19:51:17.460 に答える