你好,我需要用顺风的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>
答案 0 :(得分:3)
玛尔维娜
我不确定您使用的屏幕尺寸是多少,但是从您张贴的屏幕大小来看,它们应该在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
。
我希望这会有所帮助。
在这里您可以尝试使用不同的屏幕尺寸,不同的设置。