删除导航栏和轮播之间的间隙，具体化使用 vuejs 和 laravel

Question

我想在物化设计中消除导航栏和轮播之间的间隙。我为每个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>

旋转木马

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

应用.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'
});

应用.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;
}

显示在浏览器中

对不起，我的英语不好。但是，我真的被困住了。请给我关于这个问题的建议。谢谢。

Answer 1

要修复，您应该删除row类的下边距(由 Materialize-CSS 添加)和nav内的input元素。

以下 css 代码段应该可以解决您的问题：

/* remove input bottom margin */
nav .input-field input[type='text'] {
margin-bottom: 0;
}
/* remove .row bottom margin */
nav .row {
margin-bottom:0;
}