如何在顺风中并排对齐组件

Question

您好，我需要使用 tailwind css 和 vue 创建一个界面。我有一个过滤器容器和一个搜索栏，它们应该在不同的文件中，但应该并排显示。我已经编写了下面的代码，在 app.vue 我添加了一个仅用于搜索栏和过滤器容器的 div，但它们仍然没有并排显示。过滤器较高，搜索栏位于过滤器下方。 应用程序.vue

<template>
  <div id="app" class="bg-gray-200 font-sans flex flex-col min-h-screen">
    <AppHeader />
          <div class="container w-full flex flex-wrap mx-auto px-2 pt-8 lg:pt-16 mt-16">
    <FilterContainer/>
    <SearchBar/>
    </div>
    <router-view class="flex-grow"></router-view>
    <AppFooter />
  </div>
</template>

<script>

import AppHeader from './components/layout/AppHeader';
import FilterContainer from './components/search/FilterContainer';
import SearchBar from './components/search/SearchBar';
import AppFooter from './components/layout/AppFooter';


export default {
  name: 'app',
  watch: {
      '$route' (to) {
        document.title = to.meta.title || 'Logzor'
      }
    },
  components: {
    AppHeader,
    FilterContainer,
    SearchBar,
    AppFooter
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

搜索栏.vue

<template>
<!-- Searchbar -->

    <div class="w-full lg:w-4/5 p-8 mt-6 lg:mt-0 text-gray-900 leading-normal bg-white border border-gray-400 border-rounded">
      <input  type="text" v-model="search.search" class="h-16 appearance-none rounded-l w-full py-2 px-2 ml-2 text-gray-700 leading-tight focus:outline-none text-2xl" id="search" placeholder="Search...">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-12 rounded-r ">    SEARCH   </button>
     </div>

</template>

<script>
export default {
  props: [
    'search',
  ],
  data() {
    return {
    }
  },
  methods: {
  },
  watch: {
    value() {
      this.$emit('collectSearch', this.search)
    }
  }
}
</script>

<style scoped>

</style>

FilterContainer.vue

<template>

         <div class="w-full lg:w-1/5 lg:px-6 text-xl text-gray-800 leading-normal">
            <p class="text-base font-bold py-2 lg:pb-6 text-gray-700">Filters</p>
            <div class="block lg:hidden sticky inset-0">
               <button id="menu-toggle" class="flex w-full justify-end px-3 py-3 bg-white lg:bg-transparent border rounded border-gray-600 hover:border-purple-500 appearance-none focus:outline-none">
                  <svg class="fill-current h-3 float-right" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                  </svg>
               </button>
            </div>

         </div>

</template>

<script>
export default {

}
</script>

<style scoped>

</style>

Answer 1

马尔维娜，

我不确定您使用的屏幕尺寸是多少，但根据您发布的内容，它们应该在lg 屏幕上并排显示。所有其他屏幕，它们将在另一个屏幕下方显示一个。

发生这种情况是因为您有 w-full 和 lg:w-4/5 和 lg:w-1/5。

所有小于lg 的屏幕都将使用w-full，只有lg 的屏幕将使用w-1/5。

尝试使用md: 而不是lg:。所以应该是md:w-4/5 和md:w-1/5。

我希望这会有所帮助。

这里是游乐场，您可以在其中尝试不同的屏幕尺寸、不同的设置。

https://tailwind.run/new