Question

我想在链接后面添加背景渐变顶部栏，但我无法弄清楚样式。虽然填充为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
  }
}

Answer 1

你必须为topbar提供高度，最重要的可能是你的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>

Scss代码

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

Answer 2

您的代码正常运行。我找不到任何问题。如果您的样式不起作用，请尝试检查您拥有的其他样式并设置为parent或div

.topbar {
    width:100px;
    height:100px;
    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 : 0px;
    a {
        color:white
      }
    }

jsfiddle

Answer 3

这是因为已设置的样式。我是新手，所以我不得不通过在＆＃39; pl-md-0 pt-0`中设置填充来解决这个问题，可以删除填充。

<main class="col-md-9 float-left col px-5 pl-md-2 pt-2 main">

SCSS为顶级酒吧

3 个答案: