如何在 Tailwind 中并排对齐组件

Question

您好，我需要使用 tailwind css 和 vue 创建一个界面。我有一个过滤器容器和一个搜索栏，它们应该在不同的文件中，但应该并排显示。我在下面编写了代码，在 app.vue 处我添加了一个 div 仅用于搜索栏和过滤器容器，但它们仍然没有并排显示。过滤器更高，搜索栏在过滤器下方。 App.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>

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

如何在 Tailwind 中并排对齐组件

How to align components side by side in tailwind

css

vue.js

tailwind-css