Dropdown Bootstrap Navbar Tab在点击后会改变大小？

Question

HTML文件：

<ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#commercial">Commercial</a></li>
                <li class="dropdown" >
                  <a href="#res" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Residential <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li ><a href="#int" >Interior</a></li>
                    <li ><a href="#ext" >Exterior</a></li>
                  </ul>
Jquery File:

$(window).load(function(){
$("#bs-example-navbar-collapse-1 a").click(function() {
    $('.active').removeClass('active');
    $(this).addClass("active");
  });
}); 

Css文件：

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover{
    background-color:$primary-color;
    color:$white-color;
}

/*Main-Dropdown-Tab Problem*/
.navbar-default .navbar-nav>.open>a{
    background-color:$primary-color;
    color:$white-color;
    border:solid 1px $primary-color;
}

/* Dropdown Tabs-Hover*/
.dropdown-menu>li> a:hover,
.dropdown-menu>li> a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
    background-color:$primary-color;
    color:$white-color; 
    }

/*Dropdown-Tabs Width & Text & Radius */
.dropdown-menu {
    min-width:100%;
    text-align:center;
    border-radius:0px;
    }

/* Dropdown Tabs Removing Shadow & Borders*/
.dropdown-menu{
    box-shadow: 0 0px 0px rgba(0,0,0,.175);
    border:none !important;

   }

这是图片：

点击它后，它缺少边框并改变宽度和高度的尺寸！