How to create navbar/ tabs with squares that touch each other

StackOverflow https://stackoverflow.com//questions/25011503

Domanda

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?

Link to Plunker:

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

Menu

È stato utile?

Soluzione

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top