Como faço para aumentar a tarja de seleção (cor cinza) para ficar com largura e altura conforme selecionei de vermelho?
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Carousel */
.carousel-caption p {
font-size: 20px;
line-height: 1.4;
}
/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
width: 100%;
}
/* QR code generator */
#qrCode {
margin: 15px;
}
/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
/* Hide captions */
.carousel-caption {
display: none;
}
}
.navbar {
/*background-color: #229922;
color: #ffffff;*/
border-radius: 0;
}
.navbar .navbar-nav > li > a {
color: #fff;
}
.navbar .navbar-nav > .active > a {
color: #ffffff;
background-color: transparent;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus,
.navbar .navbar-nav > .open > a {
text-decoration: none;
background-color: #151212;
}
.navbar .navbar-brand {
color: #eeeeee;
}
.navbar .navbar-toggle {
background-color: #eeeeee;
}
.navbar .icon-bar {
background-color: #33aa33;
}
/*Formatar <li> que está dentro do drop-down-menu*/
.dropdown-menu > li {
line-height: 10em;
margin: 10px 10px 10px 10px;
font-size: 15px;
}
/*li {
margin-top: 10px;
}*/
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">RETAGUARDA</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cadastros<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pagamentos<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Recebimentos<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>