我想在链接后面放置背景渐变顶部栏，但无法弄清楚样式。尽管填充为0px并且链接未显示为白色，但顶部栏周围有空白。
这应该很简单，但对于像我这样的造型新手来说显然不是这样
:-(
谢谢！
<main class="col-md-9 float-left col px-5 pl-md-2 pt-2 main">
<div class="topbar">
<a href="#" data-target="#sidebar" data-toggle="collapse">
<i class="fa fa-navicon fa-2x py-2 p-1"></i>
</a>
</div>
<router-outlet></router-outlet>
</main>
.topbar {
background: linear-gradient(#004812, #0B7225, #3A9250);
padding : 0px;
&::a {
color:white
}
}
最佳答案
您必须在顶部栏增加高度，最重要的事情可能是您的scss文件未正确编译。试用此代码。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<main class="col-md-9 float-left col px-5 pl-md-2 pt-2 main">
<div class="topbar">
<a href="#" data-target="#sidebar" data-toggle="collapse">
<i class="fa fa-navicon fa-2x py-2 p-1"></i>Testing
</a>
</div>
<router-outlet></router-outlet>
</main>
</body>
</html>
CSS代码
.topbar {
width:100%;
height:50px;
background: -webkit-linear-gradient(#004812, #0B7225, #3A9250);
background: -moz-linear-gradient(#004812, #0B7225, #3A9250);
background: -o-linear-gradient(#004812, #0B7225, #3A9250);
background: linear-gradient(#004812, #0B7225, #3A9250);
padding : 10px 0;
position:relative;
a {
color: #fff;
}
}
您可以检查是否在下面给出了代码笔链接。[https://codepen.io/varshaCodepen/pen/QOaEyK]
关于html - 顶部栏的SCSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47362499/