elment ui el-col不自适应

Question

使用element-ui的el-row el-col做布局，结果页面不自适应

代码如下：
<template>
<el-main class="payList">

<el-row>
  <el-col :span="16">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>发票</span>
      </div>
      <div class="text item" style="text-align: center;">
        <img :src="temp.imgName" style="width: 70%;height: 70%;"/>
      </div>
    </el-card>
  </el-col>

  <el-col :span="8">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>审核</span>
      </div>
      <div class="text item">
        <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="160px" style=''>
          <el-form-item :label="$t('用户')" prop="">
            <el-input style="width: 260px" v-model="temp.realName" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item :label="$t('类型')" prop="">
            <el-select clearable class="filter-item" style="width: 130px" v-model="temp.type"
                       :placeholder="$t('类型')">
              <el-option v-for="item in  typeList" :key="item.key" :label="item.display_name"
                         :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('发票说明')" prop="">
            <el-input style="width: 260px" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                      v-model="temp.comments"></el-input>
          </el-form-item>
          <el-form-item :label="$t('交易方向')" prop="">
            <el-select clearable class="filter-item" style="width: 130px" v-model="temp.direction"
                       :placeholder="$t('交易方向')">
              <el-option v-for="item in  directionList" :key="item.key" :label="item.display_name"
                         :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('交易方用户ID')" prop="">
            <el-input style="width: 260px" v-model="temp.peerUserId"></el-input>
          </el-form-item>
          <el-form-item :label="$t('交易方名称')" prop="">
            <el-input style="width: 260px" v-model="temp.peerUserName"></el-input>
          </el-form-item>
          <el-form-item :label="$t('交易方纳税人识别号')" prop="">
            <el-input style="width: 260px" v-model="temp.peerTaxId"></el-input>
          </el-form-item>
          <el-form-item :label="$t('交易金额')" prop="">
            <el-input style="width: 260px" v-model="temp.amount"></el-input>
          </el-form-item>
          <el-form-item :label="$t('币种')" prop="result">
            <el-select clearable class="filter-item" style="width: 130px" v-model="temp.currencyType"
                       :placeholder="$t('币种')">
              <el-option v-for="item in  currencyTypeList" :key="item.key" :label="item.display_name"
                         :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('人民币总额')" prop="">
            <el-input style="width: 260px" v-model="temp.rmbAmount"></el-input>
          </el-form-item>
          <el-form-item :label="$t('开票日期')" prop="">
            <el-date-picker v-model="temp.issueDateStr" type="date"
                            placeholder="请选择开票日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            class="formInput"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('发票号')" prop="">
            <el-input style="width: 260px" v-model="temp.receiptId"></el-input>
          </el-form-item>
          <el-form-item :label="$t('FCI总数')" prop="">
            <el-input style="width: 260px" v-model="temp.fciAmount"></el-input>
          </el-form-item>
          <el-form-item :label="$t('结果')" prop="result">
            <el-select clearable class="filter-item" style="width: 130px" v-model="temp.result"
                       :placeholder="$t('审核结果')">
              <el-option v-for="item in  resultList" :key="item.key" :label="item.display_name"
                         :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('说明')" prop="">
            <el-input style="width: 260px" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
                      v-model="temp.auditResult" :placeholder="$t('请填写说明')"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button type="primary" @click="saveAudit" >{{$t('保存')}}</el-button>
        </div>
      </div>
    </el-card>


  </el-col>
</el-row>

</el-main>
</template>

你期待的结果是什么？实际看到的错误信息又是什么？

我希望大屏幕和小屏幕都显示一样，目前小屏幕的时候，页面显示不全
大屏幕：

小屏幕：

Answer 1

你里边元素限制的固定宽度

Answer 2

ElementUI 响应式样式需要另外引入 一个 CSS 文件, 此后你写的 :span="12" :md="10"才有效

import "@/assets/css/element-display.css";