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

Posted 2023-03-07

【中文标题】如何在顺风中并排对齐组件

【英文标题】：How to align components side by side in tailwind

【发布时间】：2020-04-01 11:54:45

【问题描述】：

您好，我需要使用 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>

【问题讨论】：

嗨，Malvina，能否请您发布您的页面看起来很像的图片，因为据我所见，它们应该在更大的屏幕上并排显示。

@Ben 这是图片的链接 ibb.co/Fq5cmZx 。我知道它们看起来似乎并排，但事实并非如此。当您在过滤器容器中添加元素时，搜索栏会降低

请看下面的答案，如果对你有帮助，请告诉我。

【参考方案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

【讨论】：

嘿@Ben 我试过这个，但还是不行。我认为问题可能是搜索栏和过滤器容器不在同一个容器上，因为我不确定我在 app.vue 添加的容器是否有效，但我不知道如何修复它。如果我将搜索栏和过滤器容器作为大容器的一部分放在同一个文件中，它可以工作，但不会分开。

您可以使用浏览器中的检查工具检查 html 并查看 container 是否有效。请看一下，然后将调查结果回复给我。

ibb.co/M675Pqt 我认为我选择的行是问题所在。我无法提供屏幕截图来显示 div，但它与屏幕一样宽，这就是它位于过滤器容器下方的原因。 flex-grow 用于 app.vue 。我尝试将其更改为 flex-none 并且搜索栏消失了

修复了！我所要做的就是在容器中包含 。感谢您的帮助