引導導航欄的品牌形象去出界

我想在頂部的形象留給完全居中的。我如何實現這一目標？

同樣，如果我點擊打開/關閉鏈接並移開鼠標，我該如何刪除出現的灰色突出顯示（右上角）？

<div class="navbar navbar-custom"> 
     <div class="container-fluid"> 

      <div class="navbar-header"> 
       <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#home-news-users" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <%= link_to image_tag("rnc_small.png"), home_path, class: "navbar-brand" %> 
      </div> 


    /* Nav Bar */ 

    .navbar.navbar-custom { 
     background-color: $light_navy; 
     border-radius: 0; 
     border: 0; 
     margin-bottom: 0; 
    } 

    .navbar-custom .navbar-header .navbar-toggle { 
     background-color: white; 
    } 

    .navbar-custom .navbar-header .navbar-toggle .icon-bar { 
     background-color: $light_navy; 
    } 

    .navbar-custom .navbar-nav .dropdown-menu { 
     border: 0; 
    } 

    .navbar-custom .navbar-header .navbar-brand { 
     vertical-align: middle; 
    } 

    .navbar-custom .navbar-nav > li > a { 
     color: white; 
    } 

    .navbar-custom .navbar-nav > li > a:hover { 
     color: $rnc_orange; 
     background-color: transparent; 
    } 

    .navbar-custom .navbar-nav > .close > a, 
    .navbar-custom .navbar-nav > .close > a:hover, 
    .navbar-custom .navbar-nav > .close > a:active, 
    .navbar-custom .navbar-nav > .close > a:focus { 
     background-color: transparent; 
    } 

    .navbar-custom .navbar-nav > .open > a, 
    .navbar-custom .navbar-nav > .open > a:hover, 
    .navbar-custom .navbar-nav > .open > a:active, 
    .navbar-custom .navbar-nav > .open > a:focus { 
     background-color: transparent; 
    } 

    .navbar-custom .navbar-nav .open .dropdown-menu>li>a, 
    .navbar-custom .navbar-nav .open .dropdown-menu { 
     background-color: $light_navy; 
     color:white; 
    } 

    .navbar-custom .navbar-nav .dropdown .dropdown-menu > li > a:hover{ 
     color: $rnc_orange; 
     background-color: transparent; 
    } 

    .navbar-custom .navbar-nav .dropdown .dropdown-menu > .close > a, 
    .navbar-custom .navbar-nav .dropdown .dropdown-menu > .close > a:hover, 
    .navbar-custom .navbar-nav .dropdown .dropdown-menu > .close > a:active, 
    .navbar-custom .navbar-nav .dropdown .dropdown-menu > .close > a:focus { 
     background-color: transparent; 
    } 

    .navbar-custom .navbar-nav .dropdown .dropdown-menu > .open > a, 
    .navbar-custom .navbar-nav .dropdown .dropdown-menu > .open > a:hover, 
    .navbar-custom .navbar-nav .dropdown .dropdown-menu > .open > a:active, 
    .navbar-custom .navbar-nav .dropdown .dropdown-menu > .open > a:focus { 
     background-color: transparent; 
    }

來源

2016-11-09 iswg

嘗試使用垂直對齊：中間; –

@NelsonTan試過但沒有工作。 .navbar-custom .navbar-header .navbar-brand { \t vertical-align：middle; } – iswg

請分享代碼.. –

檢查這個fiddle

.navbar-brand>img { 
    height: 100%; 
} 
.navbar-brand { 
    padding: 0; 
}

來源

2016-11-09 06:45:14 GvM

您好，先生很棒 – iswg

很高興我幫助過：D – GvM

你可以嘗試以下，也使圖像邊框設置爲0

<a class="navbar-brand" href="#"> 
    <%= link_to image_tag("rnc_small.png"), home_path, class: "navbar-brand" %> 
</a>

來源

2016-11-09 05:01:15

引導導航欄的品牌形象去出界

回答

相關問題