在物化使用vuejs和laravel中删除导航栏和轮播之间的间隙
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在物化使用vuejs和laravel中删除导航栏和轮播之间的间隙相关的知识,希望对你有一定的参考价值。
我想在物化设计中消除导航栏和旋转木马之间的差距。我为每个div和laravel使用了vue组件作为后端。我使用Sass作为预编译器css。我试图通过sass设置边距体,导航栏的边距和旋转木马的边距。此外,我想尝试通过在vue组件中作用域的样式设置边距。但它没有改变,差距仍然存在。
这是我的代码:
Navbar.vue
<template>
<nav class="white z-depth-1">
<a href="#" class="brand-logo"><img :src="'img/logo.png'" width="50px" height="50px" alt="Logo" style="margin-left:50px; margin-top:5px;"></a>
<ul id="nav-mobile" class="right">
<li>
<div class="center row">
<div class="col s12">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input type="text" class="center" />
</div>
</div>
</div>
</li>
<li><a href="sass.html">artist</a></li>
<li><a href="badges.html">merchandise</a></li>
<li><a href="collapsible.html">about</a></li>
<li><a href="collapsible.html">login</a></li>
<li><a href="collapsible.html">register</a></li>
</ul>
</nav>
</template>
<script>
export default{}
</script>
carousel.vue
<template>
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img src="/img/carone.jpg"></a>
<a class="carousel-item" href="#two!"><img src="/img/cartwo.jpeg"></a>
<a class="carousel-item" href="#three!"><img src="/img/carthree.jpeg"></a>
<a class="carousel-item" href="#four!"><img src="/img/carfour.jpeg"></a>
</div>
</template>
<style lang="scss" scoped>
.carousel{
margin-top: -20px;
}
</style>
<script>
$(function(){
setInterval(function() {
$('.carousel').carousel('next');
}, 2000);
$('.carousel.carousel-slider').carousel({
fullWidth: true,
indicators: true
});
});
</script>
App.js
/**
* First we will load all of this project's javascript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('carousel-component', require('./components/Navbar.vue'));
const app = new Vue({
el: '#app'
});
App.Scss
@import "~materialize-css/sass/components/color-variables";
@import "~materialize-css/sass/components/variables";
@import '~materialize-css/sass/materialize';
@font-face {
font-family: 'VojoCustomize'; /*a name to be used later*/
src: url('/fonts/GeosansLight.ttf');
}
nav ul li a{
color: $primary-color;
border-bottom-color: rgba(0,0,0,0);
font-family: VojoCustomize, sans-serif;
font-style: normal;
font-weight: bold;
}
.carousel{
max-height: 400px;
margin: 0 !important;
}
nav .input-field input[type='text'] {
height: 50px;
background-color: $primary-color;
margin-right: 30px;
border-radius: 10px;
margin-top: 5px;
width: 600px;
}
.yellow-primary-color{
color : $primary-color-dark;
}
.custom-textfield{
border-radius: 20px;
width: 100vw;
height : 50vh;
background-color: $primary-color;
}
对不起,我的英语不好。但是,我真的被卡住了。请告诉我这个问题的建议。谢谢。
答案
要修复你应该删除row
类的底部边距(由Materialise-CSS添加)和input
中的nav
元素。
以下css代码段应该可以解决您的问题:
/* remove input bottom margin */
nav .input-field input[type='text'] {
margin-bottom: 0;
}
/* remove .row bottom margin */
nav .row {
margin-bottom:0;
}
以上是关于在物化使用vuejs和laravel中删除导航栏和轮播之间的间隙的主要内容,如果未能解决你的问题,请参考以下文章