bootstrap navbar品牌形象走出界限

Question

我希望左上方的图像完全居中。我如何实现这一目标？

每当我点击打开/关闭链接并移开鼠标时，如何删除出现的灰色突出显示（右上角）？

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

Answer 1

检查此fiddle

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

Answer 2

您可以尝试关注并将图像边框设置为0。

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