Question

我想在页面中实现Nav选项卡标记，如bootstrap中所定义。但是，我想放置单击每个选项卡上显示的内容，在选项卡上方，而不是选项卡下面的传统放置内容。

简单来说，我想切换“标签”和“标签内容”的位置。

有人可以帮忙吗？

Answer 1

您可以通过将标签内容放在标签上来切换标签的位置和标签内容：

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

更新获取标签以显示颠倒

要使标签显示为颠倒，您可以使用

覆盖bootstrap的默认css

.nav-tabs {
  border-bottom: transparent;
  border-top: 1px solid #dddddd;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 0 0 4px 4px;
}
.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-top-color: transparent;
  cursor: default;
  margin:-1px;
}

这是一个更新的Bootply
http://www.bootply.com/K8HhVqoz08

希望这有帮助。

在引导程序导航标签上方显示内容？

1 个答案: