Question

我想创建水平导航标签/导航栏。我希望它像图片一样，每个标签都有正方形。方块互相接触。类似于上面的stackoverflow标签：问题/标签/用户等但标签之间没有空格。图片中的黑色方块是选中的标签。我附加了代码，我尝试了Tabs和navbar，以及它们的组合并没有得到它。在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

Answer 1

你必须覆盖bootstrap css文件，只需包含以下代码

即可

.nav>li>a{
padding:10px 0px !important;
}

.nav-tabs>li {
border: 2px solid aquamarine !important;
}

这是Plunker-Demo

如何创建带有相互接触的正方形的导航栏/标签

1 个答案: