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

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

img

img

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

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

【以下回答由 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的栅格文档进行调整。

参考资料


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

你都写8当然不会变啊，改改数

最基础的html布局了，不要太依赖 elementu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .header{
            display: flex;
            justify-content: center;
        }

        .container{
            max-width: 1280px;
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo{
            width: 200px;
            background-color: orange;
        }

        .search{
            flex: 1;
            background-color: skyblue;
        }

        .tools{
            width: 400px;
            background-color: gray;
        }

        .logo, .search, .tools{
            height: 100%;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="logo"></div>
            <div class="search"></div>
            <div class="tools"></div>
        </div>
    </div>
</body>
</html>