css - 使用 vuejs 和 laravel 消除导航栏和旋转木马之间的差距

Question

我想消除物化设计中导航栏和旋转木马之间的差距。我为每个 div 和 laravel 使用 vue 组件作为后端。 我将 Sass 用于预编译器 css。我曾尝试通过 sass 设置 margin body、navbar 的 margin 和 carousel 的 margin。另外我想尝试通过 vue 组件中的样式范围设置边距。但它并没有改变，差距仍然出现。

这是我的代码:

导航栏.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.Scs

@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 类的底部边距(由 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;
}