如何使用了elmentUI想实现响应式布局

Question

<template>
  <div id="app">

    <el-row :gutter="10">

      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="myimg">
          <img src="/images/logo.png" alt="">
        </div>
      </el-col>

      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="myinput">
          <el-input v-model="input" placeholder="请输入内容"></el-input><el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
      </el-col>

      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div>
          <i class="el-icon-user-solid"></i>
          <i class="el-icon-message-solid"></i>
          <i class="el-icon-shopping-cart-1"></i>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "MyHeader",
  data(){
    return{
      input: ''
    }
  }
}
</script>

<style scoped>
  #app{
    height: 62px;
    padding-top: 15px;
    padding-bottom: 5px;
  }

  .myimg{
    margin: 0 170px;
  }

  .el-input{
    width: 200px;
  }

  .myinput{
    width: 100%;
  }

  i{
    padding-right: 30px;
  }

  .el-icon-user-solid:before,
  .el-icon-message-solid:before,
  .el-icon-shopping-cart-1:before{
    font-size: 30px;
  }


</style>

使用了elmentUI想实现响应式布局，可是图片的左边不会随窗口的变化而变化。是因为写死了左外边距吗？
如果不写外边距如何让图片与左边有一点的间隔吗

将元素写在col中如何调整样式呀？

Answer 1

【以下回答由 GPT 生成】

问题分析

问题是如何使用ElementUI的栅格系统实现响应式布局。要实现响应式布局，需要设置不同屏幕大小下各个元素的宽度，并使其自适应调整宽度。

解决方案

使用ElementUI的el-row和el-col组件配合栅格系统来实现响应式布局。

步骤

1. 在Vue.js项目中安装并引入ElementUI库。
2. 在需要响应式布局的组件中使用el-row和el-col组件包裹需要布局的元素。
3. 使用el-col组件的属性来设置不同屏幕大小下的宽度。

以下是具体的代码示例：

<template>
  <div id="app">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div class="myimg">
          <img src="/images/logo.png" alt="">
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div class="myinput">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <div></div>
      </el-col>
    </el-row>
  </div>
</template>

在上面的示例中，我们使用了el-col组件的xs、sm、md、lg、xl属性来设置不同屏幕大小下的宽度。根据需要调整这些属性的值，以实现自己的布局要求。

注意：在使用ElementUI的栅格系统时，默认的栅格总宽度为24，可以根据需要自行调整。具体可以参考ElementUI的栅格文档进行调整。

参考资料

• ElementUI 栅格系统文档

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^