顶级酒吧的SCSS

问题描述：

我想在链接后面放置一个背景渐变顶栏，但我无法弄清楚样式。顶栏周围有空白区域，尽管填充为0px，并且链接不是白色。顶级酒吧的SCSS

这应该是很简单的，但显然不是这样的造型新手跟我一样 :-( 谢谢！

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

你能提供一个例子在fiddler或plnkr吗？ – Naresh217

创建plunker http://plnkr.co/edit/skIsC23kzsU5EvXUkrw9虽然没有造型在那里工作。至少在本地，我有一些问题最初提到的问题。感谢您的回应！ @ Naresh217 – Anand

答

这是因为已经设置的样式。我是一个新手，所以我必须通过在'pl-md-0 pt-0'中设置填充来填充可以被删除。

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

答

你的代码是否正常工作。我找不到任何问题。如果你的风格不工作，尝试检查，你必须和设置为父母或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

答

你必须给他其他的风格ight到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; 
     } 
    }

你可以检查一下codepen链接如下。[https://codepen.io/varshaCodepen/pen/QOaEyK]

顶级酒吧的SCSS

相关推荐