トップバーのSCSS

-1

バックグラウンドグラデーションのトップバーをリンクの後ろに置いていますが、スタイリングを理解できません。パディングは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 
    } 
}

出典

2017-11-18 Anand

あなたはfiddlerまたはplnkrで例を挙げることができますか？ – Naresh217

スタンドはそこで働いていませんが、プランナー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">

出典

2017-11-20 14:48:46 Anand

スタイリング初心者のための非常にシンプルですが、明らかではないようである必要があり、あなたのコードが正しく動作している。私は何の問題を見つけることができません。あなたのスタイル場合動作しません、あなたが持っていると親に設定するか、あなたは彼を与えるために持っている

.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

出典

2017-11-18 06:19:51

のdiv他のスタイルをチェックしようトップバーと最も重要なことは、あなたの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]

出典

2017-11-18 11:15:41

答えて

関連する問題