How to create navbar/ tabs with squares that touch each other
-
20-12-2019 - |
Question
I want to create horizontal navigation tabs/ navbar. I want it to be something like the picture, with squares for each tab. The squares touch each other. Something similar to the stackoverflow tabs above: Questions/ Tags / Users etc but without spaces between tabs. The black square in the picture is a tab that is selected. I attach code where I tried Tabs and navbar, and a combination of them and didn't get it. What is the way to do it in Bootstrap?
<html>
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body>
<ul class="nav nav-tabs">
<li ng-class="active">
<a href="">Home</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</nav>
<nav class="navbar navbar-default" role="navigation">
<ul class="nav nav-tabs">
<li ng-class="active">
<a href="">Home</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</nav>
</body>
</html>
La solution
You have to overwrite the bootstrap css file, Just include the following code
.nav>li>a{
padding:10px 0px !important;
}
.nav-tabs>li {
border: 2px solid aquamarine !important;
}
Here is Plunker-Demo
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow