在物化使用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>

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

Appear in browser

对不起，我的英语不好。但是，我真的被卡住了。请告诉我这个问题的建议。谢谢。

Answer 1

要修复你应该删除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;
}